CSS3基础

最新推荐文章于 2023-01-22 22:25:25 发布

jia-huan

最新推荐文章于 2023-01-22 22:25:25 发布

阅读量381

点赞数

分类专栏： H5 学习文章标签： css3 css

本文链接：https://blog.csdn.net/cjh_android/article/details/51448569

版权

H5 学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本章内容

CSS介绍
CSS基础语法
CSS高级语法
CSS派生选择器
CSSID选择器
CSS类选择器
CSS属性选择器

CSS介绍

CSS概述

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

CSS基础语法

selector{
    property:value
}

属性大于1个之后，属性之间用分号隔开
例：h1{color:red; font-size:14px;}

如果值大于一个单词，则需要加上引号：
例：p{font-family:"sans serif";}

简单应用
html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="MyCss.css" type="text/css" rel="stylesheet">
<head/>
<body>
    <h1>hello world</h1>
</body>
</html>

CSS

h1{
    color: aqua;
    font-size: 100px;
}

效果图
这里写图片描述

CSS高级语法

选择器分组

`h1,h2,h3,h4,h5,h6{color:red;}`

示例：
html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="MyCss.css" type="text/css" rel="stylesheet">
<head/>
<body>
    <h1>hello world</h1>
    <a>这是一个a标签</a>
    <h2>h2h2h2h2h2h</h2>
    <h3>h3h3h3hh3h3h3</h3>
</body>
</html>

css:

h1,a,h2{
    color: aqua;
    font-size: 50px;
}

效果图：
这里写图片描述

继承

body{
    color:green;
}

示例：
html

<body>
    <h1>hello world</h1>
    <a>这是一个a标签</a>
    <h2>h2h2h2h2h2h</h2>
    <h3>h3h3h3hh3h3h3</h3>

    hello css3
    <p> hello css3</p>
</body>

css:

h1,a,h2{
    color: aqua;
    font-size: 50px;
}
body{
    color: brown;
}
p{
    color: chartreuse;
}

效果：
这里写图片描述

CSS派生选择器

派生选择器：

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

示例：
html:

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

css:

li strong{
    color: brown;
}
strong{
    color: chartreuse;
}

效果：

这里写图片描述

CSSID选择器

id选择器：

id选择器可以为标有id的HTML元素指定特定的样式
id选择器以"#"来定义

id选择器和派生选择器：

目前比较常用的方式是id选择器常常用于建立派生选择器

示例：
html：

<body>
    <p id="pid">hello pid<a href="http://www.baidu.com">百度哈哈</a></p>
    <div id="divid">hello divid</div>
</body>

css:

#pid a{
    color: blueviolet;
}
#divid{
    color: blue;
}

效果：

这里写图片描述

CSS类选择器、

类选择器：

类选择器以一个点显示

class也可以用作派生选择器

示例：
html:

<body>
    <p class="pclass">hello pclass<a>p 里面的a标签</a></p>
    <div class="divclass">
        hello div
    </div>
</body>

css:

.pclass a{
    color: aqua;
}
.divclass{
    color: brown;
}

效果，包含了类选择器和派生选择器的混合：

这里写图片描述

CSS属性选择器

属性选择器：

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

属性和值选择器

示例：
html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        [title]{
            color: aquamarine;
        }
        [title=te]{
            color: chocolate;
        }
    </style>
<head/>
<body>
    <p title="5">属性选择器</p>
    <p title="t">属性选择器</p>
    <p title="te">属性选择器</p>
</body>
</html>

效果：

这里写图片描述

OVER！

jia-huan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础

本章内容CSS介绍CSS基础语法CSS高级语法CSS派生选择器CSSID选择器CSS类选择器CSS属性选择器CSS介绍CSS概述CSS指层叠样式表CSS样式表极大地提高了工作效率CSS基础语法selector{ property:value}属性大于1个之后，属性之间用分号隔开例：h1{color:red; font-size:14px;}如果值大于一个单词，则需要
复制链接

扫一扫