css学习内容
css基础语法
css使用方法
css选择器
css继承与层叠
css优先级
css命名规范
学习css的好处
简化HTML相关标签，网页体积小，下载快
解决内容与表现分离的问题
更好地维护网页，提高工作效率
第一二章 css3基础语法
css样式规则
css规则由两部分组成：选择器、声明
h1 选择器
{color:red;font-size:14px;} 声明
css引用
写在
标签内：
注意：
css本身不区分大小写，但是也有个别例外情况；
值与单位之间不能有空格，eg：pont-size:30px(30与px之间不能有空格）；
所有标点符号都要在英文的状态下书写；
新添加的样式可以并排写，但是为了阅读和维护方便，把每条样式另起一行写；
针对多个选择器具有相同的声明时，可用逗号连接，eg：
h1,h2,h3,h4{pont-size:30px;}；
css注释
html注释：``````
css注释：
/* 注释语句 */
如何引用css样式
-
行内样式（内联样式）
在开始标签内添加style样式属性，如：
内容
-
内部样式表（嵌入样式）
把css样式代码写在：
-
外部样式表
把css样式代码写在独立的一个文件中
扩展名：css文件名.css
引用外部文件：
-
导入式
方法一：@import "外部css样式"
方法二：@import url("外部css样式文件地址");
注意：
不建议大量使用行内样式；
嵌入样式中，style标签必须在head标签里；
外部样式表中，link标签也要放到head标签里面；
导入式标签须写在style标签内，且在样式代码最开始处。
css使用方法优先级（可添加!important规则调整为最高级）
行内样式（全值为1000） > 内部样式 > 外部样式
遵循就近原则
css选择器
css选择器分类
-
标签选择器（全值为1）
以HTML标签作为选择器
-
类选择器（全值为10）
为HTML标签添加class属性：
内容1
内容2
内容3
通过类选择器来为具有此class属性的元素设置css样式：
.值名{color:red;}可对不同类型元素的同一个名称的类选择器设置不同的样式规则：
p.相同值名{color:blue;}h1.相同值名{color:red;} -
ID选择器（全值为100）
为HTML标签添加ID属性：
内容1
内容2
内容3
通过ID选择器来为具有此ID的元素设置css样式规则：
#p1{color:red;}#p2{color:blue;} -
全局选择器（通配符选择器）（权值为0）
所有标签设置样式：
*{color:red;font-size:30px;} -
群组选择器
用逗号连接各个选择器，如：
h1,#p1,.值名,h4{color:red;} -
后代选择器
css层叠样式css层叠样式
css层叠样式
使用后代选择器设置，之间要用空格隔开：
p em{font-size:40px;}指对p标签下em标签设置40像素的字体大小p a em{font-size:40px;}指对p标签下a标签下的em标签设置40像素的字体大小#p1 em{font-size:40px;}指对id为p1标签下em标签设置40像素的字体大小p.red a em{font-size:40px;}指对class为red的p标签下a标签下的em标签设置40像素的字体大小 -
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
- 例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;} - 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
This is very very important.
This is really very important.
- 例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
-
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
- 例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;} - 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
- 在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
- 请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;} - 上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响
- 效果如下：
效果图
- 例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
注意：
每一个ID都必须是唯一的；
ID和class的引用值必须区分大小写；
伪类
伪类选择器定义特殊状态下的样式
无法使用标签、id、class及其他属性实现
链接伪类的4种状态：
激活状态(a:active)、已访问状态(a:visited)、未访问状态(a:link)、鼠标悬停状态(a:hover)。
链接伪类的顺序:
:link > :visited > :hover > :active
- a:hover必须置于a:link和a:visited之后才有效
- a:active必须置于a:hover之后才有效
- 伪类名称对大小写不敏感
注意：
css文本样式
font-family：字体/字体集 设置字体line-height：长度值/百分比 设置元素中文本行高text-indent：首行缩进word-spacing： 设置元素内单词之间间距letter-spacing：设置元素内字母之间间距text-transform：capitalize/uppercase/lowercase/none设置元素内文本的大小写text-decoration：underline/overline/line-through/blink(有兼容性问题）/none设置元素内文本的装饰（多个属性值可以同时存在；不可继承）vertical-align：baseline/sub/super/top/text-top/middle/bottom/text-bottom/长度/百分比 设置元素内容的垂直方式line-height：长度值/百分比 设置行高text-align：left/right/center/justify设置元素内内容水平对齐方式font-style：normal/italic/oblique设置元素内文字倾斜程度font-weight：normal/bold/bolder/lighter/100-900文字粗细font-size：绝对单位/相对单位 设置文字大小
相对单位
属性值 说明 in Inch,英寸 cm 厘米 mm 毫米 pt Point,印刷的点数 pc Pica,1pc=12pt
属性值 css2缩放系数1.2 XX-small 9px X-small 11px small 13px medium 16px large 19px X-large 23px XX-large 28px
css背景和列表
背景样式
-
background-color：颜色/transparent设置元素的背景颜色
说明:
1、
transparent是全透明黑色（black）的速记法，类似rgba(0，0，0，0）这样的值；
2、颜色值（颜色名/RGB/十六进制）；
3、背景区包括内容、内边距（
padding）和边框(记得设置边框样式为虚线还是直线，还有设置边框颜色，否则默认与文本颜色相同），不包含外边距（margin）。
-
background-image：URL地址（相对地址/绝对地址）/none把图像设置为背景
说明：
1、元素的背景占据了元素的全部尺寸（包括内边距和边框，不包括外边距）；
2、默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
background-position：百分比（X% Y%）/值（X Y） /top/bottom/right/left/center设置背景图像的起始位置（相对整个网页的位置而言；只写一个参数的话，第二个参数默认居中）background-attachment：scroll/fixed设置背景图像显示方式，即是否固定或者随着页面的其余部分滚动
说明：
scroll：默认值，背景图片随滚动条滚动
fixed：当页面的其余部分滚动时，背景图片不会移动
background-repeat：repeat（横纵都重复）/no-repeat（不重复）/repeat-x（水平重复）/repeat-y（垂直重复） 设置背景图像是否重复及如何重复background：简写属性，作用是将背景属性设置在一个声明中
说明： 各值之间用空格隔开，不分先后顺序
例如：
background:repeat red left scroll
列表样式
-
list-style-type：关键字/none设置列表项标志的类型
无序列表：
none: 无标记
disc: 实心的圆点
circle: 空心的圆点
square: 实心的方块
有序列表：
none: 无标记
decimal: 从1开始的整数
lower-roman: 小写罗马数字
upper-roman: 大写罗马数字
lower-alpha: 小写英文字母
upper-alpha: 大写英文字母
list-style-image：URL/none将图像设置为列表项标志list-style-position：inside/outside设置列表中列表项标志的位置
说明：
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
-
list-style：简写属性。用于把所有列表的属性设置于一个声明中
说明：
1、各值之间用空格隔开
2、不分先后顺序
3、list-style-image会覆盖list-style-type的设置
例如：list-style:disc inside
css盒子模型
学习内容
盒子模型概念
高和宽设置
边框设置
内边距设置
外边距设置
盒子的计算
元素显示方式
盒子模型的概念
盒子模型用来“放”网页中的各种元素
网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）
盒子模型属性
-
宽度属性（设置块级元素和替换元素的内容宽度）
宽度：
width：长度值/百分比/auto最大宽度：
max-width：长度值/百分比/auto最小宽度：
min-width：长度值/百分比/auto -
高度属性（设置块级元素和替换元素的内容高度）
高度：
height：长度值/百分比/auto最大高度（有兼容性问题，IE不支持）：
max-height：长度值/百分比/auto最小高度：
min-height：长度值/百分比/auto
块级元素： 替换元素：
~
等
浏览器根据其标签的元素与属性来判断显示的具体内容，如