目录
标签选择器
以标签的名称来进行命名的选择符
例如:
p{color:blue;}
该页面中所有的p标签都要符合该样式,颜色蓝色
id选择符
以#作为它的标识,一般用于页面中某个标签具备独有的样式时
注意:
需要给标签添加属性 id="" ,而且id属性不能够以数学开头
class选择器
以 . 作为标识,一般用于页面中某些标签具备相同的样式时进行区分使用
注意:
需要给标签添加属性 class=”“ , 而且class属性不能够以数字开头
* 全选择符
对页面中所有的标签都起作用
四种选择器的优先级:
id选择器>class选择器>全选择器>标签选择器
语法结构:
选择器{属性:属性的值;属性:属性的值}
注意:
属性和属性值的结束用分号来做表示
代码示例:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1{
color:red;
}
*{
color:orange;
}
p{
color:blue;
}
#one{
color:gold;
}
.pink{
color:pink;
}
</style>
</head>
控制字体:
设置字号: font-size 单位:px ------ 像素
设置字色: color
设置字行: font-family
设置行高: line-height 单位:可以是百分比,也可以是em 当前字体的倍数
设置字体的粗细: font-weight:normal【正常】bold【加粗】
浏览器默认的字体大小为16px
控制文本:
设置对象中文本缩进: text-indent 单位:em,可以为负值
文本水平对齐方式: text-align left,right,center【中】
对象中空白处理: white-space
normal【自动换行】pre【换行和空白受保护】nowrap【强制在同一行显示】
文本大小写控制: text-transform none【正常大小】uppercase【转换成大写】
capitalize【每个单词的第一个字母转换成大写】lowercase【转换成小写】
元素的垂直对齐方式: vertical-align sub【设置文字为下标】super【设置文字为上标】
top【把元素的顶端与行中最高元素的顶端对齐】
text-botton【把元素的低端与父元素字体的低端对齐】
代码示例:
<style type="text/css">
h1{
font-size: 32px;
text-align: center;
text-transform: capitalize;
}
#one{
font-size: 8px;
color:#102b6a;
text-align: center;
}
.two{
line-height: 2em;
text-indent: 2em;
}
.pink{
font-family: '宋体';
}
#box{
width: 1000px;
height:1000px;
border: 1px solid black;
}
#three{
text-align: center;
font:;
}
</style>