CSS基础详解

最新推荐文章于 2024-06-27 10:18:30 发布

李同学上课啦

最新推荐文章于 2024-06-27 10:18:30 发布

阅读量176

点赞数

分类专栏： CSS 文章标签： css html5 html css3 前端

本文链接：https://blog.csdn.net/DGL_CSDN/article/details/119981248

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1 css基础

1.1 css介绍

css 层叠样式表（英⽂全称：Cascading Style Sheets）不仅可以静态地修饰⽹⻚，还可以配合各种脚本语⾔动态地对⽹⻚各元素进⾏格式化

css 能够对⽹⻚中元素位置的排版进⾏像素级精确控制，⽀持⼏乎所有的字体字号样式，拥有对⽹⻚对象和模型样式编辑的能⼒

1.2 css基础语法

css 样式由选择器，⼀条或多条声明两部分组成

选择器选择器可以是任意类型的（比如类选择器或者ID选择器）
声明每条声明由⼀个属性和⼀个值组成
属性（property）是想要设置的样式属性（style attribute）
每个属性有⼀个值，属性和值被冒号分开

选择器{
    样式属性名1：样式属性值1;
    样式属性名2：样式属性值2;
    ...
}

1.3 css注释

注释是⽤来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

div { 
    /*color:red;*/
    width:200px;
}

1.4 css引⼊⽅式

1.4.1 ⾏内样式

<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>

1.4.2 内嵌样式

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .text{
                color:red;
            } 
        </style>
    </head>
    <body>
        <h1 class="text">这是内部样式引⼊⽅式</h1>
    </body>
</html>

1.4.3 外部样式

通过 link 标签引⼊

 <link rel="stylesheet" href="url">

其中 href 属性是外部样式表⽂件的URL

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
    </head> 
    <body>
        <h1 class="text">外部样式</h1> 
    </body> 
</html>

1.5 选择器

1.5.1 选择器介绍

css 选择器⽤于选择你想要的元素的样式的模式

要使⽤css对HTML⻚⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器

HTML⻚⾯中的元素就是通过CSS选择器进⾏控制的

1.5.2 常⽤选择器

通配符选择器 *
ID选择器 #id
类型选择器 .class
标签选择器 element
⼦代选择器 parent > child
后代选择器 parent child
群组选择器 selector1,selector2,selectorN
属性选择器 [attribute]

* {margin:0;}
#center {text-align:center}
p {text-align:center;}
p > a {text-align:center;}
p img {text-align:center;}
div,p{color:red;}
input[name="username"]{color:red;}

1.5.3 选择器权重

权值等级划分，一般来说是划分4个等级：

类型	权重
内联样式	如: style=" "，权值为1000
ID选择器	如：#name，权值为0100
class类选择器，伪类和属性选择器	如.name，权值为0010
标签选择器和伪元素选择器	如div p，权值为0001
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）	如*，权值为0000

注意：数位之间没有进制，级别之间不可超越

1.5.4 最⾼权重

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。

当 !important 规则被应⽤在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，⽆论它处在声明列表中的哪个位置。

css选择规则的权值不同时，权值高的选择器优先
css选择规则的权值相同时，后定义的选择器规则优先
css属性后面加 !important 时，无条件绝对优先

总体来说： !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器

注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。

1.6 css三⼤特性

1.6.1 层叠性

所谓层叠性是指多种CSS样式的叠加
层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）
样式不冲突，不会层叠
样式冲突；就会层叠；按照优先级，决定哪个样式⽣效

1.6.2 继承性

CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上；就是被⼦标签继承
不是所有的样式都会被⼦标签继承，字体类font- ; ⽂本类 text- ；颜⾊color ；⾏⾼line-height 等可以被继承
a标签⽐较特殊，没有办法通过继承改变a标签的字体颜⾊

1.6.3 优先级

权重的优先级，决定哪个样式最终⽣效
权重相同：后者⽣效；权重不同：权重⾼者⽣效

李同学上课啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础详解

1 css基础1.1 css介绍css 层叠样式表（英⽂全称：Cascading Style Sheets）不仅可以静态地修饰⽹⻚，还可以配合各种脚本语⾔动态地对⽹⻚各元素进⾏格式化css 能够对⽹⻚中元素位置的排版进⾏像素级精确控制，⽀持⼏乎所有的字体字号样式，拥有对⽹⻚对象和模型样式编辑的能⼒1.2 css基础语法css 样式由选择器，⼀条或多条声明两部分组成选择器选择器可以是任意类型的（比如类选择器或者ID选择器）声明每条声明由⼀个属性和⼀个值组成
复制链接

扫一扫

专栏目录