-
<p>标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它，在后面课程中会学习到。查看全部 -
g查看全部
-
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<p>我的母亲有 <span>蓝色</span> 的眼睛。</p>
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
查看全部 -
<div><div>将内容分为块
<section></section>将内容分为节，通常配合标题标签 以及内容使用，通常包裹p标签使用，例如
<div>
<section>
<h1>我爱你<h1>
<p>我爱你的内容</p>
</section>
</div>
查看全部 -
ixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> ....查看全部 -
<hearder></hearder>代表头部内容
<footer></footer>代表尾部内容
两种标签作用同普通div含义相同，自己区分即可
查看全部 -
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）查看全部 -
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<li>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
块状元素的特点：
每个块状元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%，即：和他父级元素宽度一致。除非指定。
设置display:block可以将元素显示为块级元素,从而使a元素具有块状元素的特点。如a{display:block;}
内联元素的特点：
和其他元素都在一行
元素的高度、宽度及顶部和底部边距不可设置
元素的宽度就是它包含的文字或图片的宽度，不可改变。
设置display:inline可以将块状元素显示为内联元素,从而使元素获得内联元素特点。如div{display:inline;}
内联块状元素特点：
和其他元素都在一行
元素的高度、宽度、行高以及顶和底边距可设置
设置display:inline-block可以将元素设置为内联块状元素
查看全部 -
css中的常用长度值：px像素，em，%百分比，这三个都是相对单位
像素
像素指显示器上的小点，css规范中假设：90像素为1英寸。实际情况是浏览器会使用显示器的实际像素值有关，大多数设计者倾向于使用像素px做单位。
2.em
em是源自给定字体的font-size值，意思是与字体等大。如果元素的font-size设置为12px，那么1em=12px。
注意：当给font-size设置单位为em时，此时计算的标准以元素的父元素的font-size为基础。
3.百分比
也是以font-size为标准计算的百分比。
如：p{font-size:12px;line-height:130%;}设置行高为字体的130%(12px*1.3)=15.6px。
查看全部 -
元素的高度也是同理。
比如：
css代码：
div{ width:200px; padding:20px; border:1px solid red; margin:10px; }html代码：
<body> <div>文本内容</div> </body>
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：
查看全部 -
文本装饰线修饰----text-decoration
技术点的解释：
1、text-decoration可以设置添加到文本的修饰。
2、text-decoration默认值为none, 定义标准的文本。
3、text-decoration的值为underline为定义文本下的一条线。
4、text-decoration的值为overline为定义文本上的一条线。
5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
文本首行缩进修饰---text-indent为文本添加首行缩进
p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>注意：2em的意思是文字的2倍大小
文本间距修饰---line-height文本设置行间距
p{line-height:1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>文本设置--letter-spacing/word-spacing 增加或减少字符间的空白
中文字间隔、字母间隔、英文字符间隔设置：letter-spacing
如：h1{letter-spacing:50px;}
<h1>了不起的盖茨比</h1>
英文单词间距：word-spacing
文本排列方式修饰---text-align文本对其方式
想为块状元素中的文本、图片设置排列样式(居中，靠左靠右)，可使用text-align
text-align:left;水平靠左
text-align:center;水平居中
text-align:right;水平靠右
查看全部 -
设置字体颜色：color
解释：
color属性可以设置字体颜色
color的值有三种形式：英文命令颜色(p{color:red;})/RGB颜色(p{color:rgb(20%,33%,25%);})/十六进制颜色(p{color:#00ffff;})
配色表
查看全部 -
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
查看全部 -
font-family设置字体
语法：
body{font-family:"微软雅黑";}或
body{font-family:"Microsoft Yahei";}
第二种会兼容性更好些，以为这种字体既美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)
font-size:20px;------设置字体大小
font-weight:bold;-----设置字体粗体
font-style---设置字体样式：
font-style:normal;----正常样式，默认样式
font-style:italic;-----设置斜体，用于字体本身就有倾斜的样式
font-style:oblique;---设置倾斜的字体，强制将字体倾斜
font样式简写：
body{
font-style:italic;
font-weight:bold;
font-size:12px;
line-htight:1.5em;
font-family:"宋体",sans-serif;
}这么多行其实可以简写成：
body{
font:italic bold 12px/1.5em "宋体",sans-serif;
}
注意：
使用这种简写方式至少要制定font-size和font-family属性，其他的属性(如font-weight,font-style,font-variant,line-height)如果没有指定将自动使用默认值
在缩写是font-size与lin-height中间要加入" / "斜杠。
一般情况下针对中文网站，下面缩写比较常用
body{
font:12px/1.5em "宋体",self-serif;
}
查看全部 -
特殊性--权值计算
如果为一个元素设置了不同的CSS样式代码，那么元素会启用哪个CSS样式是由其样式权值决定的。如：
p{color:red;}
.first{color:green};
<p class="first">三年级时<span>小女孩</span>胆小如鼠</p>
此时标签选择器和类选择器都匹配了p标签，结果.first那条起了作用，原因在与其权值高。
权值计算规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100.计算如下：
p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/另外，还有一个特殊，继承也是有权值但是很低，可以理解为最低。
查看全部
举报