1.选择器
CSS规则由两个主要的部分构成:选择器以及一条或多条声明
1.选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
2.属性和属性值以"键值对"的形式出现
3.属性是对指定的对象设置的样式属性,例如字体大小,文本颜色等
4.属性与属性值之间用英文":"分开
5.多个键值对之间用英文";"进行区分
标签选择器:
<style>
p{color: red;font-size: 12px;}
</style>
<p>
这是一个段落
</p>
<style>写在<head>里面,哪一个标签需要,就将哪个标签作为选择器
所有的标签都会被修改
类选择器:
<style>
.green{
color: green;
}
</style>
<p class="green">
这是一个段落
</p>
.类名{ }形式
然后哪个标签需要改,就在对应标签里面加上 class="类名",不需要带上" . "
类名别使用纯数字,尽量使用有意义的英文
多类名:
.red{
background-color: red;
}
.size{
width: 100px;
height: 100px;
}
<p class="red size"></p>
class后面可以跟多个类
id选择器:
#pink{
color: pink;
}
<div id="pink">野猪pq</div>
id选择器,将样式上将类选择器的.换成了#
结构上将class=""换成了id=""
两者的区别在于,id选择器只能调用一次,类选择器可以无限调用
通配符选择器:
*{
color: red;
}
选择器使用*号,当使用时,所有的标签和元素都进行修改样式
2.字体属性
设置字体:
font-family: "字体名","字体名","字体名";
1.可以写多个字体名,当没有前面的字体,就会使用后面有的,字体之间用逗号隔开
2.字体名为多个单词组成的,需要使用引号包起来
设置字号大小:
font-size: 20px;
1.px是像素
2.在<body>标签中使用,会将整篇文章的字体大小进行修改,但是标题不会修改,需要单独修改
设置字体加粗:
font-weight:bold;粗体
font-weight:bolder;特粗
font-weight:lighter;细体
font-weight:700;
数字后面不需要加单位,当在标题标签中,weight设置为400或者为normal,就能让其不变粗
或者使用
<strong>
<b>
文字风格:
font-style="";
值:
倾斜:italic
不倾斜:normal
让倾斜的字体不倾斜
em{
font-style: normal;
}
字体复合属性:
font:font-style font-weight font-size/line-height font-family;
1.使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
2.不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用
3.文本属性
文本颜色:
color:red;
双击颜色值,可以进行选择
|---------|-------------------------------|
| 表示 | 属性值 |
| 预定义的颜色值 | red,green,pink,blue等 |
| 十六进制 | #FF0000,#000000等 |
| RGB代码 | rgb(255,0,0)或rgb(99%,%67,%67) |
对齐方式:
text-align:center;
左对齐:left 右对齐:right 居中对齐:center
文本装饰:
text-decoration :underline;
|--------------|----------|
| 属性值 | 描述 |
| none | 默认,没有装饰线 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
使用none可以取消下划线
文本缩进:
text-indent:20px;
数字为正向右缩进,为负向左缩进
text-indent:2em;
单位为em,缩进当前文字的像素,几em就缩进几个文字,是相对单位
行间距:
line-height:26px;
4.CSS三大样式表
内部样式表:
内部样式表是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中
<style>
p{color: red;font-size: 12px;}
<style>
1.<style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中
2.通过这种方式,可以方便控制当前整个页面中的元素样式设置
3.代码结构清晰,但是并没有实现结构与样式完全分离
行内样式表:
行内样式表是在元素标签内部的style属性中设定CSS样,适用于修改简单样式
<div style="color: red;"></div>
1.style其实就是标签的属性
2.在双引号中间,写法要符合css规范
3.可以控制当前标签设置样式
外部样式表:
引入外部样式表分为两步:
1.新建一个后缀名为.css的样式文件,把所有css代码都放入此文件中
2.在HTML页面中,使用<link>标签引入这个文件