CSS - 选择器

一、CSS的基本语法格式：

二、常见的CSS选择器

编辑1.标签选择器

2.类选择器

3.id选择器

4.复合选择器

5.通用选择器

三、常见的CSS样式

1.color

2.font-size

3.border

4.width/height

5.padding

6.margin

四、CSS的引入方式

1.行内引入

2.内部样式

3.外部样式

假如上述是你写的页面，你就会发现其实并不美观。此时，我们可以采用CSS 来美化界面。

一、CSS的基本语法格式：

选择器+{

一条/多条声明

}

选择器，可以选择对那个元素进行修改。声明是键值对的格式。key :value ；键值对用；进行区分。声明决定：元素中的某属性修改对value值。

注意：

(1）CSS要写在<style> ...</style>中.

（2） style 标签可以写在页面的任意位置，但一般会放在<head> </head> 标签中。

（3）CSS使用/* */ 作为注释。

以下为基本的html文件格式：

<!DOCTYPE html>
<html >
<head><title>标题</title>
</head>
<body></body>
</html>

常见的html中包含css样式的文件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title><style>div{color: red;}</style>
</head>
<body>
<div>我是一个div
</div>
</body>
</html>

上述内容对文字的显示进行了修改。

二、常见的CSS选择器

前提是在代码中有该标签、该类、该id值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title><style>div{color: red;}/* 标签选择器 */h1{color: blue;}/* 类选择器 */.text{color: yellow;}/* id选择器 */#h3{color: green;}/* 复合选择器 */table  td h3{color: pink;}</style>
</head>
<body>
<div>我是一个div
</div>
<h1>我是h1</h1>
<h2   class="text">我是h2</h2>
<h1 >我是h1</h1>
<h3 id ="h3"> 我是h3</h3>
<div><table><tr><td><h3>我是h3</h3></td></tr></table>
</div>
</body>
</html>

结果：

1.标签选择器

常见的标签有：<html>、<h1> 、<input>、<table>等。

写法：标签名{}

所有的h1 标签都生效了。

2.类选择器

写法：在类的名字前在. .类名{}。

例如：在代码中<h2 class="text">我是h2</h2>，.text{ color: yellow; }。则这个元素的class为text。可以被多个标签使用。

3.id选择器

写法：#+id名。# id{ }

例如：<h3 id ="h3"> 我是h3</h3>，#h3{ color: green; }。id为h3。id唯一，不能被多个标签使用。

4.复合选择器

写法：选择器a 选择器b 选择器c { }。

例如：选择选择器a 包裹中的选择器b包裹的选择器c 。之间用空格分割开。可以任意选择器组合，也可以任意数量。

5.通用选择器

写法：*{}。

所有元素设置，不推荐。

注意：如果需要选择多种标签，用，分割开即可。

三、常见的CSS样式

1.color

（1）英文单词表示： color: yellow;

（2）rgb表示：rgb(213, 40, 211);如果有四个值，最后一个值为透明度。

（3）#+ 十六进制： #dc58d99f。与rgb属性值的对应。每一个值0-255,转为16进制。

2.font-size

字体大小： font-size: 16px;

3.border

边框：复合属性，可以设置多个样式，不分先后

（1）border-width:边框粗细。

（2）border-style:{ dotted :点状

solid 实线 double：双线 dashed :虚线}

（3）bolder-color:边框颜色

4.width/height

设置宽/高。

5.padding

内边距，复合属性。

padding-top 上。padding-bottom 下。padding-left 左。padding-right 右。

6.margin

外边距，复合属性。

margin-top 上。margin-bottom 下。margin-left 左。margin-right 右。

注意:内边框与外边框相对元素而言。取决于该元素与另一个元素的相对位置，以及在那个元素中设置距离长度。

四、CSS的引入方式

1.行内引入

在标签内使用style属性，使用css属性键值对。

2.内部样式

定义<style> ,在该标签内部定义CSS样式。

3.外部样式

定义<link>标签，通过href属性引入外部CSS文件。<link ref="stylesheet" href="【css文件路径】">

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title> <!-- 外部标签 --><link ref="stylesheet" href="text5.css"><!-- 内部标签 --><style>h1{font-size: 25px;}</style>
</head>
<body><!-- 行内标签 --><h1  style="color: red;">我是h1</h1>
</body>
</html>