CSS
css 样式由选择符和声明组成，而声明又由属性和值组成
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里文字是红色。</p>
style用来修改样式，注意要写在元素的开始标签里，下面这种写法是错误的：
<p>这里文字是红色。</p style="color:red">
并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式css样式，就是可以把css样式代码写在head标签中，<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
<style type="text/css">
span{
color:red;
}
</style>
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，意味着可以再不同页面之间复用，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
CSS基本语法：选择器，声明块
选择器可以选中页面的指定元素，声明块指定设置为元素设计的样式，声明块由一个个声明组成，声明是一个名值对结构，一个样式名对应一个样式值， 名和值之间以：连接，以；作为结尾
元素选择器 根据标签名来选中指定的元素
语法 标签名{ }
id选择器 根据元素的id属性值选中一个元素
语法：#id{ }
类选择器
根据class属性值选中一组元素
语法：class属性值 同一个标签可以有多个class
通配选择器
选中页面所有的元素
语法*
交集选择器
同时选中复合多个条件的元素
语法：选择器1选择器2选择器3
如果有元素选择器，必须使用元素选择器开头
关系选择器
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素 例如 div>span
即对div中德span元素进行相应的操作
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
例如： div span{
color:blue}
兄弟元素选择器
选中有相同父元素
语法：选择下一个兄弟 前一个+下一个
选择下边所有的兄弟 前一个~下一个
属性选选择器
伪类（不存在的类，特殊得类）
伪类用来描述第一个元素的特殊状态，例如第一个子元素
：first-child第一个子元素
：last-child最后一个子元素
：nth-child()选中第n个子元素
例如 ul>li:first-child {color:red} 将第一个元素变成红色
伪元素
使用：：开头
：：first-letter表示第一个字母 ：：firstline表示第一行 ::selection表示选中的内容 ::before 元素的开始 ::after元素的最后
<style> p::first-letter{}</style>
<p>Lemon</p> 即选中L
继承
为一个元素设置的样式同时也会应用到它的后代元素上(背景相关不会被继承)
选择器的权重：内联样式>id选择器>类和伪类选择器>元素选择器
盒子模型（行内元素的盒模型不支持设置高度盒宽度，垂直方向边框边距的设置不会影响布局）
CSS将页面中的所有元素都设置为一个矩形的盒子，将元素设置为盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
组成有：内容区，边框，内边距，外边距
内容区：子元素和文本内容都在此排列，内容区域大小由weight和height决定
weight:200px height:50px background-color:red
如果子元素大小超过了父元素，则子元素溢出，使用overflow属性设置父元素如何处理溢出的子元素
overflow:auto 根据需要生成滚动条
visible溢出的内容在父元素外部显示
hidden溢出内容会被裁剪不再显示
scroll 生成两个滚动条，通过滚动条查看完整内容
边框，边框属于盒子边缘，决定了盒子大小
边框宽度 border-width border-left(top right bottom)-width
边框颜色 border-color
边框样式 border-style
border:10px orange soild;
内边距 padding 内容区和边框之间的距离是内边距， padding-top:100px; 会将盒子上端100px分割出来，内边距背景颜色会受内容区影响
外边距margin 两个盒子之间的距离，垂直方向会发生折叠现象，相邻垂直边取两者外边距的最大值作为两个盒子的距离
margin-top:100px; 上边距100px,会使盒子下移100px
display:block 将元素设置为行内元素
display:inline 将元素设置为块元素
display:table将元素设置为表格
display:none元素不显示
浙公网安备 33010602011771号