css笔记

①可以将CSS样式编写到元素的style当中
< p style=“color:red”>蓝色

②内联样式：将样式直接编写到style属性当中（只对当前元素中内容起作用）

②将css样式编写到head的style标签里

③（使用不同页面可以使用）将样式表编写到外部CSS文件中
最大限度使样式可以复用，将样式统一写在样式表中，然后通过link标签引入，可利用浏览器缓存加快用户访问速度。
1.创建一个.css文件
2.< link rel=“stylesheet” type=“text/css” href=""/>

块元素——会独占一行的元素 【 p h1 div】
内联元素（行内元素）——只占自身大小的元素 【a img iframe span】

一般块元素包含内联元素
a元素可以包含任意元素，除了本身。
p元素不可包含任何其他的块元素。

选择器分组：选择器1，选择器2，选择器N{}
通配选择器：*{}
复合（交集）选择器（选中同时满足多个选择器的元素）：选择器1选择器2选择器N{}

选择器
id选择器：通过元素的ID属性值选中唯一的一个元素。
语法：#ID属性值{}
< p id="">……

类选择器：通过元素的class属性值选中一组元素
语法：.class属性值{}
< p class="">……
.p2{}
可以同时为一个元素设置多个class属性值，多个值之间空格隔开
< p class=“p2 hello”>……
.p2{}
.hello{}

后代元素选择器：祖先元素 后代元素{}
div span{}
子元素选择器：父元素>子元素{}
伪类选择器：伪类专门用来表示元素的一种特殊状态
a:link——表示普通的链接（未访问）
a:visited——访问过的（只能定义字体颜色）
a:hover——鼠标滑过的链接
a:active——正在点击的链接
使用伪元素来表示元素中的一些特殊位置
-:first-letter 首字母
-:first-line 首行
p:first-line{}
-:focus——获取焦点
-:before——指定元素前
P:before{
content:“出现在段落最前边”
}
-:after——指定元素后
-selection——选中的元素 [火狐中另一种：:-moz-selection]

   title属性：可以给任何标签指定，鼠标移到元素上时title值作为提示文字显示

属性选择器：可以根据元素中的属性或属性值来选取指定元素
1.p[title]{
background-color:red
}
p[title=“hello”]{}
2.为title属性值以ab开头的元素
p[title^=“ab”]{}
3.为title属性值以c结尾的元素
p[title$=“ab”]{}
4.为title属性值中有c的元素
p[title*=“c”]{}

子元素的伪类
:first-child 选择第一个子标签
:last-child 最后
:nth-child 第N
:first-of-type 选择指定类型的子元素
:last-of-type
:nth-of-type

兄弟元素选择器
span+p{}前一个+后一个
span_p{}前一个后面所有p

否定伪类：可以从已选中的元素中剔除出某些元素
:not（）
p:not(.hello){}

样式的继承——祖先元素上的样式被后代元素所继承（背景相关的样式不会被继承）

选择器的优先级（权重）
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，1
通配*，0
继承的样式，没有优先级
包含多种选择器，相加再比较
PS：选择器优先级计算不会超过最大数量级；优先级一样，靠后的优先；并焦选择器优先级单独计算 div,p,#p1{}

在样式最后，添加一个！important 可获最高优先级（避免使用）

伪类的顺序
涉及到a的伪类顺序 :link :visited :hover :active

字体样式
color
font-size(默认16px)
font-family:微软雅黑，arial
字体分类：serif(衬线字体） sans-serif(非) monospace(等宽字体）
cursive（草书字体）fantasy（虚幻字体）
font-style 设置文字斜体
可选值：normal italic oblique
font-weight 设置文体的加粗效果
可选值：normal bold
font-variant 设置小型大写字母
可选值：normal small-caps
△font: italic bold small-caps 60px “微软雅黑”
△文字大小 字体 必须写

line-height 设置行高 行间距=行高-字体大小

对于当行文本来说，可以将行高设置为和父元素的高度一致，使单行文本在父元素中垂直居中。
.box{
width:200px;
height:200px;
background-color:#bfa;
line-height:200px;
}

在font中也可以指定行高：font:30px/50px “雅黑”

文本样式
文本大小写
大写：text-transform:uppercase
小写：text-transform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none
文本的修饰
下划线：text-decoration:underline
上划线：text-decoration:overline
删除线：text-decoration:line-through
超链接默认值是underline
字母（符）间距 letter-spacing
单词间距 (空格大小） word-spacing
文本对齐方式
text-align：
left right center justify
首行缩进
text-indent：32px (2em(-99999px 隐藏不想显示的文字