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>标签引入这个文件