css入门宝典

3.1.4 通配符选择器

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

例子 : *{

margin: 0; //外间距

padding: 0; //内间距

}

一 CSS基本语法

1基础知识

1.1概述

Css (层叠样式表)是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。

1.2 css基本语法
CSS的定义是由三部分组成的，包括选择符( selector)、属性( properties)、属性值（value）语法如下：

选择器{
属性1:属性值1;
属性2:属性值2;
……
}
注意：每个属性有一个值，属性和值用冒号隔开。如果要定义不止一一个“属性:属性值”的声明时，需要用分号将每个声明分开，最后一条声明规则可以不加分号。

例如：

h1{ /*标记选择器h1选中网页的所有<h1>标记*/
color :red; /*设置文字的颜色属性为红色*/
font-size:14px; /*设置文字的大小属性为14像素*/
}
注意：css中/* */是注释。

如果属性值由多个单词组成是需要用引号括起来，例如：

h2{
font-family: 'New Century Schoolbook' ;
}

h2{
font-family: Times, ' New Century Schoolbook' ，Georgia;
}

1.2. CSS的使⽤
⾏内式
⾏内样式将样式定义在具体html元素的style属性中。以⾏内式写的CSS耦合度⾼，只适⽤于当前元素，在设定某个元素的样式时⽐较常⽤。
<p style="color:red;font-size:50px;">这是⼀段⽂本</p>
1
在当前元素使⽤ style 属性的声明⽅式。
style 是⾏内样式属性；
color 是颜⾊属性；red 是颜⾊属性值；
font-size是字体⼤⼩属性；50px 是字体⼤⼩属性值

2. 类选择器

元素选择器可以设置网页中所有相同标记的统一格式，但如果需要对相同标记中某些个别标记做其他效果设置时，使用HTML元素标记就无法实现。
类(class )选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。语法格式如下所示:

.类选择器名称{
样式属性:属性值;
样式属性:属性值;
……
}
注意:类选择器的定义是以英文圆点开头。类选择器的名称可以任意(但是不能用中文)但最好以驼峰方式命名。

类选择器的使用语法格式如下：

< 标记名称 class="类选择器名称1 类选择器名称2 ..."
例如：

<div class="myBoxColor myBoxBackground"> </div>
这里定义了两个类选择器,在HTML的div标记使用这两个类选择器，在使用两个以上的类选择器时，其名称之间要用空格分隔，最终这两选择器定义的样式会叠加，并在div标记中呈现。如果在两个类选择器中都对同一个样式属进行了样式定义，则最后定义的样式起作用。

<head>
    <style>
        /* id选择器 */
        #world {
            color:rgb(225, 0, 255);
            font-size: 70px;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div id="world">world</div>
    <div>nihao</div>
</body>

3. 通配符选择器

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

例子 : *{

margin: 0; //外间距

padding: 0; //内间距

}

标签选择器

也称为元素选择器，用html标签名称作为选择器，按标签名称分类，为页面中某一类型标签指定统一的CSS样式

作用：标签选择器可以把某一类标签全部选择出来，如所有的<div>标签
优点：能快速为页面同类型的标签统一设置格式
缺点：不能设计差异化样式，只能选择全部的当前标签

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 150px;
        }
 
        .red {
 
            background-color: red;
        }
 
        .green {
 
            background-color: green;
        }
 
        #blue {
            background-color: skyblue;
        }
    </style>
</head>
 
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box" id="blue"></div>
</body>
 
</html>

三、基本属性

1.字体属性

1.1 字体系列 font-family

body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

各种字体之间必须使用英文的逗号隔开
多个单词组成的字体加引号
常见的字体：body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

1.2 字体大小 font-size

font-size:16px;

px（像素）大小是常用单位
谷歌默认大小16px
不同浏览器默认值不同，尽量给一个明确的值
body指定整个页面文字大小，标题除外

1.3 字体粗细 font-weight

font-weight: 400;

normal 默认值，不加粗
bold 加粗
100-900 400等同于normal，700等同于bold，数字后面不跟单位

1.4 文字样式 font-style

font-style:normal;

normal 默认值，不倾斜
italic 显示斜体字样

2. 文本属性

2.1 文本颜色

color： red ；

预定义的颜色值：black，skyblue等
十六进制
RGB代码

2.2 文本对齐

text-align：center;

left	文本左对齐
right	文本右对齐
center	文本居中

2.3 装饰文本

text-decoration

属性：

none	默认没有下划线
underline	下划线
overline	上划线
line-through	删除线

3.背景

3.1 背景颜色

background-color：red；
默认背景颜色transparent(透明)

CSS盒子模型

8.1 边框(border)

边框粗细 : border-width
边框样式: border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框
边框颜色: border-color

div {
    width: 500px;
    height: 250px;
    border-width: 10px;
    border-style: solid;
    border-color: green; 
}
 
 
div {
    /* 支持简写 */
    border: 1px solid red;
}

8.2 外边距 (margin)

控制盒子和盒子之间的距离 . 外边距和内边距类似，也是可以四个方向分别设置；也是可以写作，1个数字，2个数字，4个数字...规则和 padding 完全一致,外边距不会撑大盒子.

div {
    height: 50px;
    width: 50px;
    margin-top: 5px;
    margin-left: 10px; 
    
    /* 先设置上下，，再设置左右 */
    margin: 20px,40px;
    /* 顺时针设置，上、右、下、左 */
    margin: 20px,40px,20px,40px;
}

padding内边距