您的位置：首页 > Web前端 > CSS

腾讯前端十天小白训练营<DAY 3>---css引入方式、选择器&权重

2017-08-10 10:44 871 查看

CSS的引入方式

<html>
<head>
<title>css的引入</title>
<!--外链式/链接式 : 新建css文件，引用时注意相对路径和绝对路径的区别-->
<link href="demo.css" type="text/css" rel="stylesheet"/>

<!--内嵌式-->
<style type="text/css">
p{
color:green;
}
</style>
</head>

<body>
<!--行内样式-->
<p style="color:red;">hello</p>

<p>样式的显示：就近原则</p>
</body>
</html>

导入式(一般不用）：

<style>
@import(url(demo.css))
</style>

w3school_____如何创建css

css选择器

1) 标签选择器：是什么标签就写什么标签；

p{
color:red;
}

2) class选择器：可以重复，可以共用;

一个标签可以有多个class;

.c1{
color:blue;
}
.c2{
font-size:36px;/*设置字体大小*/
/*添加和取消粗体使用font-weight属性bold,normal;
添加或取消斜体可以使用font-style属性：italic(斜体）,normal,  oblique(倾斜的字体);
控制大小写:text-transform:
uppercase,capitalize,lowercase
*/

}

3) id选择器：优先级最高；

不能共用，在同一个html文档中同一个ID只能用一次

https://www.zhihu.com/question/19899340；（具体的还是遇到了再查吧，现在查了也看不懂@-@）

#d1{
color:green;
}

下面是源代码：

<html >
<head>

<link href="Untitled-2.css" type="text/css" rel="stylesheet"/>
</head>

<body>

<p class="c1" id="d1"> hello </p>
<p class="c1 c2" id="d2"> hello </p>

</body>
</html>

下面是css部分

p{
color:red;
}
.c1{
color:blue;
}
#d1{
color:green;
}

.c2{
color:yellow;
font-size:36px
}/* CSS Document */

空格：

body .c1{
}

表示 body 下面的 c1

c1后面再加空格就表示 body下面的c1下面的xxx

逗号:

<
4000
pre class="prettyprint">

.c1,.c2

表示class=c1和class=c2的标签

下面是源代码：

<html>
<head>
<link href="Untitled-5.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div>
<p class="c1">cccccccccc</p>
<p>dddddddddc</p>
<p>ceeeeeeec</p>
<p>ccffffff</p>
</div>

</body>
</html>

*号：

表示页面中的所有标签

*{
color:blue;
}

+号

表示紧随前面标签的同级元素

*{
color:blue;
}.c1+p
{
color:red;
}

~

以下css代码表示class=c1后面所有同级的元素

.c1~p
{
color:red;
}

> 表示子元素的

以下是源代码

<html>
<head>
<link href="Untitled-5.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div>
<p class="c1">cccccccccc</p>
<p>dddddddddc</p>
<p>ceeeeeeec</p>
<p>ccffffff</p>
<div><p>wwwww</p></div>
</div>

<p>cddddddddd</p>

</body>
</html>

以下css代码表示div下的子元素中的P标签

div>p
{
color:red;
}

以下表示.c1下的子元素的p标签

.c1>p
{
color:red;
}

以下表示class=c1下的所有p标签

.c1 p
{
color:red;
}

[ ]表示设置了某属性的某标签

以下是源代码：

<html>
<head>
<link href="Untitled-5.css" type="text/css" rel="stylesheet" />
</head>

<body>
<a href="http://www.w3school.com.cn" title="aaa">w3school.cn</a>
<a href="http://www.w3school.com" >w3school</a>
</body>
</html>

如下表示设置了title属性的a标签

a[title]
{
color:red;
}

如下为为包含指定值的 title 属性的所有元素设置样式

[title~=hello] { color:red; }

如下表示属性值为一个链接的a标签

a[href='http://www.w3school.com.cn']
{
color:red;
}

如下，

^ 表示以xx开头的

$表示以XX结尾

*表示里面包含指定值（如 a[href*=’www’] ）

~表示包含指定值（词汇）的 title 属性的所有元素设置样式。适用于由空格分隔的属性值

a[href^='http://www.w3school.com.cn']

{
color:red;
}
a[href$='.com']

{
color:green;
}

详细内容参考w3school-css属性选择器详解

css选择器权重

<html>
<head>
<link href="Untitled-5.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="c1">
<h3 class="c2" id="d2" >hello</h3>
</div>
</body>

</html>

如下，权重依次增加,最终hello显示为red

.c1 h3
{
color:blue;/*cd*/
}
.c1 .c2
{
color:yellow;/*cc*/
}
#d2
{
color:black;/*b*/
}
.c1 #d2
{
color:red;/*bc*/
}

css具有继承性，当设置:

.c1
{
color:red;
}

显示hello为red

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 前端腾讯

相关文章推荐

新的分享

章节导航