html 选择器语法,CSS入门：基本语法、选择器用法

1. css的概念及其作用

css全称为(Cascading Style Sheets)翻译过来就是层叠样式表。

作用：主要作用就是设置网页的文字(大小，颜色，字体，对齐等等)图片和板式布局等等，其实说的简单点了就是给页面化妆的。

基本语法

选择器 {

属性1: 值1;

属性2: 值2;

...

}

CSS初体验

修改字体的颜色和字体大小，通过标签div选择器设置。

Title

div {

color: red;

font-size: 30px;

}

CSS入门初体验

构建css的运行环境是通过style标签，该标签可以写在任意位置，但通常写在head标签里面。而在style标签里选中对应的元素，如div，div标签后面跟一个空格，然后在大括号中以健值对的方式写属性和属性值。

2. 字体属性

2.1 设置字体的大小

font-size 设置字体的大小

取值：font-size: 30px;

注意：在css大多数数值都需要添加单位，px是一个单位像素，代表屏幕的像素

通过标签选择器设置字体的大小

div {

font-size: 30px;

}

设置字体的大小

2.2 设置字体的粗细

font-weight 设置字体的粗细

取值：normal(普通字体)、bold(加粗字体)、100-900

注意：用数字设置的时候，只有400和700会产生变化，是因为字体在初始设计的时候就没有设置太多的粗细标准，一般就是两种，默认的和加粗的，所以在实际工作中，用的最多的就是normal(400) bold(700)

通过标签选择器设置字体的粗细

div {

font-weight: bold;

}

设置字体的粗细

2.3 设置字体的风格

font-style 设置字体的风格(样式)

取值：normal 默认，显示标准字体样式

italic 字体斜体

通过标签选择器设置字体的风格(样式)

div {

font-style: italic;

}

设置字体的风格(样式)

2.4 设置不同类型的字体

font-family 设置不同类型的字体

取值：宋体、微软雅黑、黑体等

注意：

不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等

字体可以写多组，中间用逗号隔开；如：font-family: '微软雅黑', Arial;

字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号，中文字体也需要添加引号。了解：http://code.ciaoca.com/style/...

2.5 font简写

font: font-style font-weight font-size/line-height font-family;

不建议修改顺序，并且不需要设置的属性可以不写，但是font-size和font-family必须指定，否则将不起作用

font简写设置字体

div {

font: italic bold 20px/1 '宋体';

}

font的简写

3 选择器

想要操作任何一个标签，那么首先需要做的事情就是选中对应的标签，而这个就是选择器的作用

3.1 标签选择器

标签名 {

属性1: 值1;

属性2: 值2;

...

}

特点：会将页面上所有符合的标签都选择上，但是不能实现差异化选择。

使用标签选择器，如示例中的div标签，所有的div标签都会应用上css样式。

div {

color: pink;

font-size: 20px;

font-weight: normal;

font-style: italic;

}

标签选择器

标签选择器

3.2 类名选择器

声明类名选择器: 声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;}

调用类名选择器: 给对应的元素添加class类名属性 class="自定义的类名"

/* 声明类名选择器 */

.box {

font-size: 20px;

}

类选择器

特点：可以给相同标签的元素定义不同的样式，在实际工作中用的最多

/* 声明两个类名选择器 */

.box1 {

font-size: 20px;

}

.box2 {

color: red;

}

类选择器

类选择器

3.3 多类名选择器

需求：两个相同的标签，有一些共同的css样式 但是也有一些差异化的css样式，怎么实现呢？

如：字体的颜色相同，但字体的大小不一样

.red {

color: red;

}

.fz-20 {

font-size: 20px;

}

.fz-25 {

font-size: 25px;

}

类选择器

类选择器

一个元素可以拥有多个类名，类名和类名之间用空格隔开，多类名选择器可以让我们解决更复杂的一些需求。

3.4 id选择器

id选择器的使用方式和类选择器基本一致：

声明id方式： #自定义id名字 {属性1:值1;属性2:值2;}

调用id方式： 给对应的元素添加属性 id="自定义id"

/* 声明id选择器，语法： #自定义id名字 */

#box {

color: red;

}

id选择器

特点：id选择器一般配合后期的js使用较多，效果和类选择器一样，只不过是类选择器可以被多个元素调用，但是id选择器只能被一个元素调用 在同一个页面中，不能出现两个id值相同的元素

3.5 通配符选择器

* {

属性1: 值1;

属性2：值2;

}

特点：选中任何元素，后期用于页面初始化。

3.6 伪类选择器

伪类选择器可以理解为选择的元素的一种状态，并不是如之前直接选中元素就完事了。

如：a标签的伪类选择器

a:link 没有被访问的时候的状态

a:visited 访问之后的状态

a:hover 鼠标移动上去之后的状态

a:active 鼠标按下的状态

伪类选择器在实际工作中，不会写这么多，意义不大，推荐简写的方式完成

a {}

a:hover {} 鼠标移动上去之后的状态

4 文字的对齐、缩进、下划线

4.1 水平对齐

通过text-align属性设置，如：text-align:值;

取值：left 左对齐方式

right 右对齐方式

center 居中对齐方式

注意：该属性控制的是标签 “内部的文字” 水平居中

.box {

text-align: right;

}

文字水平对齐

4.2 首行缩进

通过text-indent属性设置，如：text-indent:值;

取值可以是像素，也可以是em 推荐写法：text-indent:2em;

.box {

width: 100px; /* 设置宽度为100px，为了演示效果 */

text-indent: 2em;

}

首行缩进, 首行缩进, 首行缩进

4.3 字体下划线和删除线

通过text-decoration属性设置，如：text-decoration:值;

取值：underline 下划线

line-through 删除线，贯穿线

none 去掉多余的样式

.box {

text-decoration: underline;

}

字体的下划线

5 行高

行高控制的是文字与文字之间的上下距离 (行距)

line-height:值;

值的取值是像素，也可以是倍数，如：line-height:1.5;

如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中

与text-align: center;结合使用可以让单行文字在标签内部水平垂直居中

div {

width: 250px;

height: 250px;

background-color: pink;

line-height: 250px;

text-align: center;

/* 让单行文字在盒子里水平垂直居中，

text-align: center;

line-height值设置为标签高度即可

*/

}

行高，设置水平垂直居中

6 其它注意事项

1、 颜色属性

颜色属性的取值可以是：

英文(如：red)

十六进制(如：#ff0000)

rgb(red, green, blue)

rgba(red, green, blue, alpha)

background-color: rgb(256, 0, 0);

2、css的注释

css的注释与html的注释不一样

/* css的注释 */