CSS
层叠样式表。html为内容,css可以起到改变样式,换肤。
语法格式
每行最后的分号可加可不加 规范加上选择器 规定样式名字并作用于所有对应的html标签
CSS添加方法
1)行内样式 直接使用style属性在每个标签中 只能针对当前标签起作用

2)内嵌样式 使用style标签写在head标签之内 只对当前页面起作用
type="text/css" 表示当前样式以css文本规定的
3)单独CSS文件链接样式 使用link标签执行外部一个单独CSS文件 所有样式可以应用不同网页中
外部文件style.css定义样式 使用link标签引用样式 link标签用来链接一个文件 rel="stylesheet"表示链接的文件类型是css
CSS优先级

外面规定的属性最里面的并没有规定的 那么外面规定的属性也会显示出来
CSS选择器
1)标签类型选择器 样式名字和标签同名 作用于该标签的所有网页元素
在style中定义选择的名字是body 作用于正文的body标签
2)类别类型选择器 使用.开头 使用class属性进行引用 作用于所有class引用这种选择器的网页元素
在style中定义了.one的样式 正文中使用class="one"来引用该样式
3)ID类型选择器 使用#开头 使用id属性进行引用 具有唯一性 对比类别类型选择器,它通常被引用一次
在style中定义了#one的样式 正文中使用id="one"来引用该样式 定义id样式只能被引用一次
4)嵌套定义的选择器 两个选择器之间使用空格 p span表示p标签内部的span标签使用该样式
在style中定义选择器名字是是p span表示该样式是p标签内部的span标签使用的
5)样式集体声明 多种标签使用该样式 p,h1表示p标签和h1标签同事使用该样式
style中使用h1,p作为选择器名 表示该样式同时作用于正文的h1标签和p标签
6)全局样式 使用*作为选择器名字 表示整个网页默认的样式
在style中使用*声明的选择器表示该样式作用于整个网页
注意:
- 多个类别类型样式可以同时使用class引用,使用空格分开
- id选择器不可以同时引用多个
- 同个标签中可以既使用id属性引用也可以使用class属性引用

文本和字体的样式
单位
em表示字符 相对于当前字体像素值的倍数 2em 系统当前字体是12px 那么就等于2*12px%表示百分比 相对于当前像素值的百分比的值 当前像素值没有设置的话可以继承上个对应的标签的值
颜色

文本属性

字符间距的值可以正数也可以负数
使用行高line-heigth属性来设置文字垂直居中line-heigth值要和heigth值相同
文字水平居中使用text-align justify表示两边没有空格

装饰线text-decoration:none表示没有装饰线 常在超链接文字中设置
字体属性

font属性可以通过一行方式的写法
背景和超链接样式
背景属性
backgroud-color 背景颜色backgroud-image 背景图片backgroud-repeat 背景图片填充方式 repeat-x 图片横向填充满这个区域 repeat-y 图片纵向填充满这个区域 no-repeat 表示让只填充一次


超链接选择器
a:link 未访问的超链接状态a:visited 已经访问的超链接状态a:hover 鼠标放在链接上时的状态a:active 链接正在被点击时候的状态

超链接属性4种状态的设置顺序

在a:hover中设置font-size字体大小可以做到鼠标悬停放大字体的效果
列表和表格的样式
列表属性
list-style-image 设置项目标号的图片list-style-type 设置项目标识的类型 数字,空心圆等list-style-position 设置项目标号和项目文字之间的位置





表格属性
width 表格宽度heigth 表格高度border 表格边框颜色粗细 实虚线border-collapse 表格外层边框和单元格的边框是否重叠 border-collapse:collapse 重叠在一起


奇偶选择器
标签:nth-child(odd|even) odd表示基数 even表示偶数