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>
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
逗号:
.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