【day04】css
一. CSS2.0[Cascading Style Sheets]层叠样式表
1. 什么是CSS:修饰网页元素(标记)外观(比如给文字加颜色，大小，字体)的，W3C规定尽量用CSS样式替代XHTML属性
2. XHTML和CSS的关系
XHTML实现是网页结构，CSS修饰网页外观
3. CSS的使用
(1) 内联样式(写在标记上的)
<标记名称 style="css样式"/>
<标记名称 style="css样式">...</标记名称>
(2) 内部样式(写在head标记中)
<style type="text/css">
... css样式
</style>
(3) 外部样式 (将CSS样式单独写一个页面，然后引用页面)
<link type="text/css" rel="stylesheet"
href="CSS文档URL" media="all"/>
说明:
type:目标文档类型
rel :当前文档和目标文档的关系
href :CSS文档URL
media:根据不同的媒介(设备)，使用不同CSS样式
media:
all 所有
print 打印机
screen 屏幕
TV 电视
(4) 优先级：内联样式最高，内部和外部优先级同级后面的覆盖前面的样式
4. CSS样式格式
选择器 { 属性: 值; 属性: 值; ... }
selector { property: value; property: value; ... }
5. 选择器 ( selector )
(1) 通配符选择器 * { ... } ( 自动应用于所有标记中 )
(2) 标记选择器 标记 { ... } ( 自动应用于指定标记中 )
(3) class( 类 ) 选择器 .class名称 { ... } ( 手动应用于任意标记中 ，应用例如 class="a1 a2..."，如果有多个class名称用空格隔开 )
(4) id选择器 #id名称 { ... } ( 手动应用唯一标记中，例如应用: id="id名称" )
(5) 群组选择器 选择器名称，选择器名称... { ... } (不同选择器但属性相同的缩写)
(6)后代选择器 选择器名称 选择器名称 { ... } (两个选择器至少是父子关系)
(7)子代选择器 选择器名称>选择器名称 { ... } (两个选择器必须是父子关系)
6. 选择器的优先级
标记选择器 权值 0001
class选择器 权值 0010
ID选择器 权值 0100
内联样式 权值 1000
说明: 权值越大优先级越高，权值相同优先级相同，后面的样式覆盖前面的样式，继承的优先级最低
7. color的属性值
(1) 单词 red blue green...
(2) 十六进制 (0-9 a b c d e f)
红色: #ff0000 == #f00
(3) rgb: (r:red,g:green,b:blue 0-255)
红色:rgb(255,0,0) ==rgb(100%,0%,0%)
红色 #f00 rgb(255,0,0)
绿色 #0f0 rgb(0,255,0)
蓝色 #00f rgb(0,0,255)
白色 #fff rgb(255,255,255)
黑色 #000 rgb(0,0,0)
黄色 #ff0 rgb(255,255,0)
浅灰色 #eee rgb(200,200,200)
深灰色 #333 rgb(3,3,3)
8.伪类选择器
(1)行为伪类
:link 元素未访问过状态
:visited 元素访问过的状态
:hover 设置鼠标悬停状态
:active 设置鼠标激活状态
说明:
a. 按LVHA 的顺序设置
b.工作中实现
a{
color:#333;
text-decoration:none;
}
a:hover{
color:#900;
text-decoration:underline;
}
:focus： 设置鼠标获得焦点状态
(2)UI元素伪类
:checked 设置元素被选中状态(css3.0)
:disabled 设置元素禁止状态
:enabled 设置元素启用状态
9.伪元素选择器
:before :设置元素之前的内容或图像
:after ： 设置元素之后的内容或图像
例如:
:before{
content:"内容"|url(图像)
}
:after{
content:"内容"|url(图像)
}
10.文本样式
(1)文本颜色 color:value;
(2)文本大小 font-size: value; (单位:像素px;默认字的大小的倍数 em,例如:1.5em)
(3)文本字体 font-family: 宋体, arial, "Times New Roman"
(4)文本水平对齐 text-align: left | center | right
(5)文本行高 line-height: value;
说明:如果文本行高 和盒子高度一致，能实现文本在盒子中垂直居中
(6)文本缩进 text-indent: value
例如:首行缩进 ：text-indent: 2em;
说明:只能对块元素实现文本缩进，而行元素不可以
(7)文本加粗 font-weight: normal 默认值 | bold 加粗 | 100-900
说明: normal ==400 bold==700
(8)文本倾斜 font-style:normal默认值|italic倾斜
(9)小型大写字母 font-variant:normal|small-caps
font的缩写形式
font:font-style 倾斜 ||
font-variant 小型大写字母 ||
font-weight 加粗 ||
font-size 字大小 / line-height 行高 ||
font-family 字体
(10)文本修饰 text-decoration:none |
underline 下划线 |
overline 上划线 |
line-through 删除线
(11)text-transform : none |
capitalize 每个单词首字母大写 |
uppercase 转为大写 |
lowercase 转为小写
11 盒模型(BoxModel)
(1)width 宽度
(2)height 高度
说明:块元素和有宽高属性的标记(img input等)设置宽度和高度,行元素不能设置宽度和高度
(3)padding 内边距
(4)margin 外边距
(5)border 边框
说明: span标记 : 没实际意义的行元素
div标记 : 没实际意义的块元素
