CSS基础
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>标签引入这个文件
原文地址：https://blog.csdn.net/2301_80251684/article/details/143661047
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！