✔️CSS基础

最新推荐文章于 2024-07-20 21:01:09 发布

高xv

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量864

点赞数 26

分类专栏：前端基础文章标签： css 前端

本文链接：https://blog.csdn.net/GaoxvLee/article/details/139358125

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

✔️CSS基础

文章目录

- ✔️CSS基础

CSS定义

层叠样式表（Cascading Style Sheets），是一种样式表语言，用来描述HTML文档的呈现（美化内容）

书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。

提示：属性名和属性值成对出现 ~> 键值对

CSS引入方式

内部样式表

<style>
/*其中代码为CSS*/
    p{
        /* key(属性):value(值);*/
        color:blue;
    }
</style>

外部样式表

<link rel="stylesheet" href="./my.css">

行内样式

配合JavaScript使用

<button style="color:red;">按钮</button>

选择器

作用：查找标签，设置样式

基础选择器

标签选择器

使用 标签名作为选择器 ~> 选中同名标签设置相同样式。

例如：p,h1,div,a,img…
```
<style>
    h1{
        color:white; 
    }
</style>
```
注意：标签选择器无法差异化同名标签的显示效果。
类选择器

作用：查找标签， 差异化设置标签的显示效果

步骤：

：定义类选择器 ~> .类名
：使用类选择器 ~> 标签添加 class=“类名”
```
<style>
    .aside{
        color:white; 
    }
</style>
<div class="aside">
    aside
</div>
```
注意：
- 类名自定义，不要用纯数字或中文，尽量用英文命名
- 一个类选择器可以供多个标签使用
- 一个标签可以使用多个类名，类名之间用空格隔开
  开发习惯：类名见名知意，多个单词可以用 - 连接。例：news-hd
id 选择器
作用：查找标签，差异化设置标签的显示效果。
场景：id选择器一般配合JavaScript使用，很少来设置CSS样式。

<style>
    #gaoxv{
        color:white;
    }
</style>
<div id="gaoxv">
    gaoxv
</div>

步骤：
：定义id选择器 ~> #id名
：使用id选择器 ~> 标签添加 id=“id名”

规则：

：同一个 id 选择器在一个页面只能使用一次

通配符选择器
作用：查找页面所有标签，设置相同样式。
通配符选择器： ,不需要调用，浏览器会自动查找页面所有标签，设置相同样式*。
```
 <style>
    * {
        color:white;
    }
</style>
```
复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

后代选择器

选中某元素的后代元素。

选择器写法： 父选择器子选择器（CSS属性），父子选择器之间用空格隔开。
```
<style>
	div span {
        color:white;
    }
</style>
<div>
    <p>
    	<span>div的后代</span>    
    </p>
</div>
```

注：

后代可以是儿子、孙子、重孙子…修改的是子选择器的样式
代码执行时先确定子选择器，再找父选择器（从右向左执行）。

子代选择器

选中某元素的最近后代元素（子代元素）

选择器写法：父选择器 > 子选择器（CSS属性），父子选择器之间用 > 隔开。

<style>
	div > span {
        color:white;
    }
</style>
<div>
    <!--儿子被渲染 -->
    <span>div的儿子</span>
    <p>
    	<span>div的孙子</span>    
    </p>
</div >

并集选择器

选中多组标签设置相同的样式。

<style>
    /* 同时渲染 div，span,p 标签 */
	div,
    span,
    p {
        color:white;
    }
</style>

交集选择器

选中同时满足多个条件的元素。

选择器写法：标签.类名，即是某个标签，又包含某个类名

<style>
    div.gaoxv {
        color:white;
    }
</style>
<!-- div被渲染 -->
<div class="gaoxv">div中的gaoxv</div>
<p class="gaoxv">p中的gaoxv</p>

伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式。

超链接四状态：

鼠标悬停状态：选择器 : hover (CSS属性)
访问前： ~ ：link
访问后： ~ ：visited
点击时(激活)： ~ ：active

    <style>
        .gaoxv:hover {
            color:white;
        }
    </style>
    <div class="gaoxv">gaoxv</div>

文字控制属性

描述	属性	属性值
字体大小	font-size	文字尺寸
文字粗细	font-weight	normal(400) / bold(700)
字体倾斜	font-style	normal / italic
行高	line-height	数字+单位 / 数字（文字大小倍数）
字体族	font-family	字体名：楷体；
字体复合属性	font
文本缩进	text-indent	数字px / 数字em（相对）
文本对齐	text-align	left / center / right
修饰线	text-decoration	none / underline / line-through /overline
颜色	color	关键字 / rgb / rgba /十六进制

行高-垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值（适用于单行文字）

水平对齐方式 - 图片

text-align本质是控制内容的对齐方式，属性要设置给内容的父级

CSS三大特性

层叠性

特点

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加：不同的CSS属性都生效

<style>
    div {
        color:black;
    }
    
    div {
        color:white;
        font-size：20px;
    }
</style>
<!-- div 中文本将被渲染为 white 色,大小为 20 像素 -->

注：选择器类型相同则遵循层叠性，否则按选择器优先级判断

继承性

特点：子级默认继承父级的文字控制属性

注：如果标签有默认文字样式会继承失败。例如：a标点的颜色、标题的字体大小

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的 匹配规则

规则：选择器优先级高的样式生效

公式： !important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

选中标签的范围越大，优先级越低

<style>
    div {
        color:black;
    }
    
    .gaoxv {
        color:white;
    }
</style>
<!-- Gaoxv 将被渲染为 white 色 -->
<div class="gaoxv">Gaoxv</div>