当前位置：首页 > article >正文

CSS核心

article 2025/1/29 23:33:23

CSS的引入方式

内部样式表是在 html 页面内部写一个 style 标签，在标签内部编写 CSS 代码控制整个 HTML 页面的样式。<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的 <head> 标签中。

<style> 
    div { 
        color: red; 
        font-size: 12px; 
    } 
</style>

行内样式表是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

外部样式表是将样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用。引入外部样式表分为两步：

1.新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

2.在 HTML 页面中，使用 link 标签引入这个文件。

<-- 
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为stylesheet，表示被链接的文档是一个样式表文件。 
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
-->
<link rel="stylesheet"  href="css文件路径">

CSS选择器

CSS选择器是用来选取HTML标签。选择了标签之后，就可以对这些标签设置样式。CSS选择器有多种，下面介绍的都是比较常用的。

基础选择器

标签选择器：给页面中的HTML标签指定统一的CSS样式。

<!-- 给页面中所有的div标签设置如下样式 -->
div {
    属性名1: 属性值1;
    属性名2: 属性值2
    ...
}

类选择器：给若干个HTML标签设置相同的类名，统一给这些标签设置相同的样式。我们可以给多个HTML标签起相同的类名，为他们指定公共的样式，再单独为他们起一个类名指定自己的样式。

//定义类名
<div class="类名1 类名2"></div>

<!-- 选择类名，设置样式 -->
.类名1 {
    属性名1: 属性值1;
    属性名2: 属性值2
    ...
}

.类名2 {
    属性名1: 属性值1;
    属性名2: 属性值2
    ...
}

id选择器：给标有特定 id 的 HTML 元素设置样式。

//定义id
<div id="pink"></div>

<!-- 选择id，设置样式 -->
#pink {
    属性名1: 属性值1;
    属性名2: 属性值2
    ...
}

通配符选择器：使用通配符选取页面中所有标签，为其指定样式。

<!-- *表示匹配页面中所有HTML标签 -->
* {
    属性名1: 属性值1;
    属性名2: 属性值2
    ...
}

复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

后代选择器：又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签的选择器写在前面，内层标签的选择器写在后面，中间用空格分隔。样式声明最终会作用在内层标签上。

<!-- 元素可以是基础选择器的任意一种 -->
元素1 元素2 元素3 { 样式声明 }

子选择器：只能选择亲儿子元素。

<!-- 元素可以是基础选择器的任意一种 -->
元素1 > 元素2 { 样式声明 }

并集选择器：可以选择多组标签, 为他们定义相同的样式。不仅仅是基础选择器，任何形式的选择器都可以作为并集选择器的一部分。

元素1,元素2,元素3 { 样式声明 }

CSS属性

字体属性

字体属性用于定义字体系列、大小、粗细和文字样式。

//浏览器会按照字体顺序挨个查看电脑上有没有装，会使用最先匹配到的，如果都没有，则采用浏览器默认字体
font-family: "字体1", "字体2", "字体3"

//设置字体大小
font-size: 20px

//设置字体粗细。normal(默认字体)，bold(加粗)，bolder(特粗体)，lighter(细体)，数字(直接写个数字代表字体粗细，400和normal等价)
font-width: 400

//设置字体样式。normal(默认值，浏览器标准的字体样式)，italic(斜体)
font-style

<!--
字体复合属性。font: font-style  font-weight  font-size/line-height  font-family;
必须严格按照以上顺序定义属性值。不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。
-->
font: italic 700 16px "微软雅黑"

文本属性

文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

<!-- 
文字颜色，有三种方式表示，分别是：
预定义的颜色(red，green等等)、十六进制(#FF0000) 、RGB代码(RGB(255,0,0))
-->
color: red

<!-- 盒子中文本的对齐方式。left(左对齐)、center(居中对齐)、right(右对齐) -->
text-align: center

<!-- 
装饰文本，给文本添加下划线、删除线、上划线。
none(没有装饰线，常用来去掉a标签的下划线，默认)、underline(下划线)、overline(上划线)、
line-through(删除线)。
-->
text-decoration：underline

<!-- 设置文本第一行的缩进 -->
text-indent: 2em

<!-- 设置文本的行高。文本的高度有三个部分组成，分别是上间距+文本高度+下间距，增大行高实际上就是
调整上间距和下间距的高度 -->
line-height: 26px