①可以将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{}前一个+后一个
spanp{}前一个后面所有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 隐藏不想显示的文字