css选择器与常用属性

最新推荐文章于 2024-08-07 09:37:01 发布

程序员小白z

最新推荐文章于 2024-08-07 09:37:01 发布

阅读量175

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_46529872/article/details/123117891

版权

css选择器与常用属性

概述

css全称层叠样式表

网页的内容，由html控制
网页的样式，由css控制

css语法

选择器{
   属性名：属性值;
}

css常用选择器

元素选择器：h1,img,p
类选择器：className
id选择器：#id
通配符选择器：*

常用的css属性

字体大小：font-size
字体颜色：color
宽度：width
高度：height
背景颜色：background-color
文本水平居中：text-align
文本行高（垂直居中）:line-height

其他选择器

层级选择器：selector1 selector2
组合选择器：selector1,seletor2
伪类选择器（增加行为）：selector:hover
伪元素选择器(增加元素)：selector::before,selector::after
还有其他一些不常用的选择器

/*css2 伪类选择器和伪元素选择器都是用一个冒号表示*/
/*css3 为了区分伪类选择器和伪元素选择器，伪类用的是一个冒号，而伪元素用的是两个冒号，但是浏览器是可以支持css2和css3的，但是还是用css3可以更加方便区分*/
.line::before,.line::after{
    content:"-----";
    color:red;
}

选择器的权重

相同选择器：后面的会覆盖前面的
不同选择器：id(100)>class(10)>element(1)
层级选择器：按权重累加计算
设置最高权重：!important

引入css的方法

嵌入样式

<html lang="en">
    <head>
        <style>
            .h1{
                color=red;
            }
        </style>
    </head>
    <body>
        <h1>
            你好
        </h1>
    </body>
</html>

内联样式(权重高于嵌入样式，写的越多越难以维护)

外部样式(实际开发大部分都使用外部样式)

<html>
    <head>
        <link rel='stylesheet' href="css文件地址">
    </head>
</html>

上面的内容是根据晓舟报告的视频所写的笔记
原始内容请到晓舟报告查看

程序员小白z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css选择器与常用属性

css选择器与常用属性概述css全称层叠样式表网页的内容，由html控制网页的样式，由css控制css语法选择器{ 属性名：属性值;}css常用选择器元素选择器：h1,img,p类选择器：classNameid选择器：#id通配符选择器：*常用的css属性字体大小：font-size字体颜色：color宽度：width高度：height背景颜色：background-color文本水平居中：text-align文本行高（垂直居中）:line-heig
复制链接

扫一扫