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

时间 2019-11-21

标签 css 入门基本语法选择器用法栏目 CSS 繁體版

原文原文链接

1. css的概念及其做用

css全称为（Cascading Style Sheets）翻译过来就是层叠样式表。
做用：主要做用就是设置网页的文字（大小，颜色，字体，对齐等等）图片和板式布局等等，其实说的简单点了就是给页面化妆的。css

基本语法

选择器 {
    属性1: 值1;
    属性2: 值2;   
    ...
}

CSS初体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>

<div>CSS入门初体验</div>

</body>
</html>

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

2. 字体属性

2.1 设置字体的大小

font-size 设置字体的大小
取值：font-size: 30px;
注意：在css大多数数值都须要添加单位，px是一个单位像素，表明屏幕的像素

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

<head>
    <style>
        div {
            font-size: 30px;
        }
    </style>
</head>
<body>

<div>设置字体的大小</div>
</body>

2.2 设置字体的粗细

font-weight 设置字体的粗细
取值：normal（普通字体）、bold（加粗字体）、100-900

注意：用数字设置的时候，只有400和700会产生变化，是由于字体在初始设计的时候就没有设置太多的粗细标准，通常就是两种，默认的和加粗的，因此在实际工做中，用的最多的就是normal（400） bold（700）翻译

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

<head>
    <style>
        div {
            font-weight: bold;
        }
    </style>
</head>

<body>
<div>设置字体的粗细</div>
</body>

2.3 设置字体的风格

font-style 设置字体的风格（样式）
取值：normal 默认，显示标准字体样式
italic 字体斜体

经过标签选择器设置字体的风格（样式）code

<head>
    <style>
        div {
            font-style: italic;
        }
    </style>
</head>

<body>
<div>设置字体的风格(样式)</div>
</body>

2.4 设置不一样类型的字体

font-family 设置不一样类型的字体
取值：宋体、微软雅黑、黑体等

注意：orm

不推荐使用一些冷门字体，由于一些冷门字体不少电脑里面默认没有安装，这个时候就会显示不出来。因此实际工做中，默认都是一些主流字体如宋体微软雅黑等
字体能够写多组，中间用逗号隔开；如：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简写设置字体htm

<head>
    <style>
        div {
            font: italic bold 20px/1 '宋体';
        }
    </style>
</head>

<body>
<div>font的简写</div>
</body>

3 选择器

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

3.1 标签选择器

标签名 {
     属性1: 值1;
     属性2: 值2;
     ...
}

特色：会将页面上全部符合的标签都选择上，可是不能实现差别化选择。

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

<head>
    <style>
        div {
            color: pink;
            font-size: 20px;
            font-weight: normal;
            font-style: italic;
        }
    </style>
</head>

<body>
<div>标签选择器</div>
<div>标签选择器</div>
</body>

3.2 类名选择器

声明类名选择器: 声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;}
调用类名选择器: 给对应的元素添加class类名属性 class="自定义的类名"

<head>
    <style>
        /* 声明类名选择器 */
        .box {
            font-size: 20px;
        }
    </style>
</head>

<body>
<!-- 调用类名选择器 -->
<div class="box">类选择器</div>
</body>

特色：能够给相同标签的元素定义不一样的样式，在实际工做中用的最多

<head>
    <style>
       /* 声明两个类名选择器 */
        .box1 {
            font-size: 20px;
        }

        .box2 {
            color: red;
        }
    </style>
</head>

<body>
<!-- 两个相同的标签订义不一样的样式 -->
<div class="box1">类选择器</div>
<div class="box2">类选择器</div>
</body>

3.3 多类名选择器

需求：两个相同的标签，有一些共同的css样式可是也有一些差别化的css样式，怎么实现呢？
如：字体的颜色相同，但字体的大小不同

<head>
    <style>
        .red {
            color: red;
        }

        .fz-20 {
            font-size: 20px;
        }

        .fz-25 {
            font-size: 25px;
        }

    </style>
</head>

<body>
<!-- 多个类名使用 空格 隔开 -->
<div class="red fz-20">类选择器</div>
<div class="red fz-25">类选择器</div>
</body>

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

3.4 id选择器

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

声明id方式： #自定义id名字 {属性1:值1;属性2:值2;}
调用id方式：给对应的元素添加属性 id="自定义id"

<head>
    <style>
       /* 声明id选择器，语法： #自定义id名字 */
        #box {
            color: red;
        }

    </style>
</head>

<body>
<!-- 调用id选择器：经过属性id设置-->
<div id="box">id选择器</div>
</body>

特色：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 居中对齐方式

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

<head>
    <style>
        .box {
            text-align: right;
        }
    </style>
</head>

<body>
<div class="box">文字水平对齐</div>
</body>

4.2 首行缩进

经过text-indent属性设置，如：text-indent:值;
取值能够是像素，也能够是em 推荐写法：text-indent:2em;

<head>
    <style>
        .box {
            width: 100px; /* 设置宽度为100px，为了演示效果 */
            text-indent: 2em;
        }

    </style>
</head>

<body>
<div class="box">首行缩进, 首行缩进, 首行缩进</div>
</body>

4.3 字体下划线和删除线

经过text-decoration属性设置，如：text-decoration:值;
取值：underline 下划线

line-through 删除线，贯穿线
none 去掉多余的样式

<head>
    <style>
        .box {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div class="box">字体的下划线</div>
</body>

5 行高

行高控制的是文字与文字之间的上下距离（行距）

line-height:值;

值的取值是像素，也能够是倍数，如：line-height:1.5;
若是将标签的高度和行高设置成同样，那么这个标签里面的文字能够在这个标签里面垂直居中
与text-align: center;结合使用可让单行文字在标签内部水平垂直居中

<head>
    <style>
        div {
            width: 250px;
            height: 250px;
            background-color: pink;
            line-height: 250px;
            text-align: center;
            /* 让单行文字在盒子里水平垂直居中，
              text-align: center;
              line-height值设置为标签高度便可
           */
        }
    </style>
</head>

<body>
<div>行高，设置水平垂直居中</div>
</body>

6 其它注意事项

一、颜色属性
颜色属性的取值能够是：

英文(如：red)

十六进制（如：#ff0000）
rgb(red, green, blue)
rgba(red, green, blue, alpha)

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

二、css的注释
css的注释与html的注释不同

<!-- html的注释 -->

/* css的注释 */