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

CSS的入门

2016-12-14 20:50 363 查看

1. 第一节 CSS引入的方式

css--->Cascading Style Sheet:层叠样式表

1.1 行间样式

把CSS代码写在HTML文档标签中,在它的style属性中定义.如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="height:100px;width:100px;background:red">
</div>
</body>
</html>

1.1 页面级

把CSS编写的代码放到文档< head>标签中的< style>标签之间.如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
< style type="text/css">
div{
height:100px;
width: 100px;
background: green;
}
</style>

</head>
<body>
< div >
lala
< /div>
</body>
</html>

1.3 外部CSS文件形式(最常用)

把css代码存为一个扩展名为.css的独立文件.在文档的< head>部分放一个< link>标签,并把他的href属性指向该文件.如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="div.css">
</head>
<body>

<div>
</div>

</body>
</html>

2.第二节 CSS选择器的分类

2.1 ID选择器

在HTML文档中的任意一标签中设置id属性,在CSS代码中用井号(#)选中id属性所指向的值.如下:

HTML文档.

<!DOCTYPE html>
< html lang="en">
< head>

<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="div.css">
</head>
<body>

<div id="only">123</div>

</body>
</html>

独立的CSS代码

#only{
height:100px;
width: 100px;
background: red;
}

一个标签只能有一个id，一个id值只能对应一个标签

2.2class选择器

在HTML文档中的任意一标签中设置class属性,在css代码中用.选中class属性所指向的值.如下:

在上面的HTML文档< div>标签改为(以下介绍中,将HTML文档的其他结构省略.)

<div class="demo"><div>

.class{
height:100px;
width: 100px;
background: red;
}

一个标签中可以有多个class，多个标签的class值可以一样.如下:

<div class="demo demo1 demo2"></div>
<p class="demo"></p>
<span class="demo"><span>

2.3 标签选择器

用法如下:

div{
height:100px;
width: 100px;
background: red;

2.4 通配符选择器

将页面所有的标签全部选中.如下:

*{
margin:0;
padding:0;
}

2.5 派生选择器

选择的元素为某一个标签包裹的某个标签,可以多级包裹.如下:

div p{
}
div span em{
}

2.6 直接子元素选择器

选择某一标签直接包裹的标签,被包裹的标签,只能被一个父级标签包裹.如下:

div > p{
height:100px;
width: 100px;
background: red;
}

2.7 并列选择器

假如两个元素的class属性指向了一个值,为了选择出其中一个元素的class属性就用并列选择器.如下:

HTML文档

<div class="demo"> </div>
<p class="demo"></p>

css代码

div.demo{
}

2.8 属性选择器

用法,如下:

<div title="123"> </div>

[title]{
}

2.9 分组选择器

选择多个独立的标签,每个标签用逗号分隔.如下:

< span> 1< /span>
< p>2< /p>
< em >3 < em>

span,p,em{
}

3. 第三节选择器的排序(权重值)

3.1 !important :无穷大

3.2 行间样式:1000

3.3 id:100

3.4 class|属性|伪类:10

3.5 标签|伪元素:1

3.6 通配符:0

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

标签： css

相关文章推荐

新的分享

章节导航