css学习笔记（1)

最新推荐文章于 2024-09-23 15:32:37 发布

thystar

最新推荐文章于 2024-09-23 15:32:37 发布

阅读量464

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/47626867

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

css：层叠样式表：参考http://www.w3school.com.cn/css/css_syntax.asp

简单举例：

/*选择器分组*/
h1,a,h2{
    color: blue;
    font-size: 50px;
}
/*对body中的内容给定样式，没有被定义的标签均为此样式*/
body{
    color: blueviolet;
}

在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>sssssssssssss</h1>
<a href="">sddddd</a>
<h2>ssssssssssss</h2>
<h3>ssssssss</h3>
</body>
</html>

Css派生选择器

<p><strong>CCCCCC</strong></p>
<ul>
    <li><strong>lililili</strong></li>
</ul>

css:

/*只对li标签的strong添加样式*/
li strong{
    color:red;
}

/*给strong 单独指定样式
说明已经定义好的样式不会被覆盖*/
strong{
    color:gold;
}

CSS的id选择器：

可以为标有id的html元素指定特定的样式，id选择器以“#”定义；

<div id="divid"> hello world</div>

#divid{
    color: blueviolet;
    font-size: 30px;
}

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

#divid a{
    color: blueviolet;
    font-size: 30px;
}

<div id="divid"> hello world<a href="">star</a></div>

类选择器：

以一个 “.” 显示；

class也可以用作派生选择器：

.divclass a{
    color: salmon;
    font-size: 70px;
}

<div class="divclass">kkkkkkk<a href="">ppppccc</a></div>

属性选择器：

[title]{
    color: green;
}

<p title="t">属性选择器</p>

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录