网站首页 > 基础教程正文

Css有哪些用法?小白轻松入门 css的用法

ccvgpt 2024-10-12 14:24:12 基础教程 9 ℃

1.1 选择器语法

选择器{ 样式1;样式2;样式3;……}

1.2 CSS基本选择器

（1）标签选择器

语法:

标签{样式1;样式2;}

font-weight: bolder;

color:darkslategray;

font-family: "微软雅黑";

}

(2) 类选择器

.box2{

border:dotted 2px blue;

}

Html使用类

(3) id选择器

/*Id选择器*/

#top{

height: 120px;

}

#middle{

height: 500px;

}

#bottom{

height: 200px;

background: #ccc;

}

html中使用：

box1

</div>

box2

</div>

box3

</div>

(4)通配符选择器

样式1;

样式2;

}

padding: 0;

margin: 0;

}

(5)包含选择器

语法：

E1 E2

table td { font-size:14px; }

.prolist{

width: 200px;

border: solid 1px gray;

}

.prolist h3{

height: 40px;

line-height: 40px;

text-indent: 20px;

}

.prolist ul li{

text-indent: 20px;

border-bottom: dotted 1px gray;

}

Html部分:

<ul>

</ul>

</div>

(6) 子选择器

语法：

E1 > E2

/*子选择器*/

body>div{

border: solid 1px gray;

margin: 5px;

}

</style>

<div>

这是第一个的段落

<div>

这是第一个段落中嵌套的段落

</div>

<div>

这是第二个段落

</div>

(7) 分组选择器

作用：将同样的样式，应用于不同的选择器

语法：

E1,E2,E3,E4{

样式;

}

/*分组*/

/*span,p,a{

color:goldenrod;

}*/

.aa,.bb,#p1{

color:red;

}

<div>

这是第一个的段落

<div>

这是第一个段落中嵌套的段落

</div>

这是span标签

</span>

<a href="#" class="bb">这是超链接标签</a>

</div>

<div>

这是第二个段落

这是p标签

</p>

</div>

(8) 属性选择器

1. E1[attr]

2. E1[attr=value]

3. E1[attr~=value]

4. E1[attr|=value]

<!DOCTYPE html>

<html>

<head>

input{

width: 80px;

height: 40px;

border: solid 1px red;

}

input[type="submit"]{

color: blue;

}

input[name="button"]{

color: red;

}

</style>

</head>

<body>

</form>

</body>

</html>

上一篇： CSS 样式规则 css样式规则由什么组成
下一篇： css预处理器less语法 css3预处理器

网站首页 > 基础教程 正文

Css有哪些用法?小白轻松入门 css的用法

猜你喜欢

网站首页 > 基础教程正文