Web前端——Css3基础

最新推荐文章于 2023-02-10 11:25:35 发布

盼盼

最新推荐文章于 2023-02-10 11:25:35 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/KYX_2023/article/details/102649777

版权

视频学习，请多包含！
在这里插入图片描述

一、介绍及语法

Css概述：

Css指层叠样式表
Css样式表极大地提高了工作效率

基础语法

selector{
	property:value
	}

如果属性多余一个，属性之间用分号隔开；
例如，h1{color:red;font-size:15px;}
如果属性值在一个以上，则需要加上引号
例如，p{font-family:"sans serif"}

二、Css高级语法

选择器分组：

可以给多个标签加上同一个样式属性

h1,h2,h3,h4,h5,h6{color:blue}

继承

body{color:green;}

其他标签中的颜色会继承body的属性

三、派生选择器

派生选择器：

通过依据元素在其位置的上下文来定义样式

<body>
    <p><strong>p标签：hello Css</strong></p>
    <ul>
        <li><strong>li标签：hello css</strong></li>
    </ul>
</body>

/* 给li标签的内容加上颜色 */
li strong{
    color: blueviolet;
}

在这里插入图片描述
第二种：p标签里的strong把li标签的strong属性覆盖

/* 给li标签的内容加上颜色 */
li strong{
    color: blueviolet;
}
/* 单独strong标签加上颜色 */
strong{
    color: hotpink;
}

在这里插入图片描述

四、id选择器

id选择器可以为标有id的HTML元素指定特定的样式
id选择器以“#”来定义
id选择器常与派生选择器一起使用

<body>
    <p id="pid">hello css</p>
    <div id="divid">id选择器一般多用于div标签</div>
</body>

/* id选择器 */
#pid{
    color: blue;
}
#divid{
    color: deeppink;
}

在这里插入图片描述
id选择器与派生选择器一起使用

<body>
    <p id="pid">hello css<a href="http://jikexueyuan.com">学院</a></p>
    <div id="divid">div属性<p>id选择器一般多用于div标签</p></div>
</body>

#pid a{
    color: blue;
}
#divid p{
    color: deeppink;
}

在这里插入图片描述

五、类选择器

类选择器：

类选择器以一地点来进行定义
类选择器（class）也可以用作派生选择器

<body>
	<p class="pclass">class的效果<a href="http://jikexueyuan.com">链接</a></p>
    <div class="divclass">hello div<p>p标签</p></div>
</body>

/* 类选择器 */
.pclass a{
    color: red;
}
.divclass p{
    color: #FFdd33;
}

在这里插入图片描述

六、属性选择器

1.属性选择器：

对带有指定属性的HTML元素设置样式

<head>
    <style type="text/css">
        [title]{
            color: red;
        }
</head>
<body>        
    <p title="t">属性选择器</p>
</body>

在这里插入图片描述

2.属性和值选择器：

<head>
    <style type="text/css">
        [title]{
            color: red;
        }
        /*需要指定title值，否则样式不生效*/
        [title=t1]{
            color: blue;
        }
</head>
<body>        
    <p title="t">属性选择器</p>
    <p title="t1">属性和值选择器</p>
</body>

在这里插入图片描述

盼盼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端——Css3基础

视频学习，请多包含！一、介绍及语法Css概述：Css指层叠样式表Css样式表极大地提高了工作效率基础语法selector{ property:value }如果属性多余一个，属性之间用分号隔开；例如，h1{color:red;font-size:15px;}如果属性值在一个以上，则需要加上引号例如，p{font-family:"sans serif"}二、Cs...
复制链接

扫一扫