CSS详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <p>
        这是一个段落
    </p>
    <!--style标签可以放在代码的任意位置-->
    <style>
        p{
            color:red;
            font-size:30px;   <!--字体大小-->
            <!--{}里面的CSS属性，可以写一个也可以写多个。每个属性都是一个键值对，键和值之间使用冒号分隔，键值对之间使用分号分隔，每个键值对可以独占一行，也可以不独占一行-->
        }
    </style>
</body>

</html>

2、内联样式

使用style属性，针对指定的元素设置样式。

此时不需要写选择器，直接写属性键值对，这个时候的样式只是针对当前元素生效。

只针对当前对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:red; font-size:40px;">
        这是一个段落
    </p>
</body>
</html>

内联样式的优先级比内部样式优先级高

3、外部样式

创建一个.html文件，再创建一个.css文件，用来写格式

把CSS代码单独作为一个.css文件，再通过link属性，让html引入该css文件。

css1.html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <p>
        这是一个段落
    </p>
</body>
</html>

style.css源码

p{
    color: rgb(229, 255, 0);
    font-size:100px;
}

通过在css1.html文件中使用link标签，来连接两个文件

<link rel="stylesheet" href="style.css">

href属性，描述了.css文件的地址。

运行结果

实际开发中，一般都使用外部样式来写css。

二、 CSS选择器

1、标签选择器

在{}的前面写标签名字，此时意味着会选中当前页面中所有的指定标签。

2、类选择器

创建CSS类，手动指定哪些元素应用这个类

定义类，需要使用 . 开头

引用这个类时，通过属性class属性=“类名”即可，不需要带 .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        /*此处定义了一个CSS类，名字叫做one，CSS类名定义的时候需要使用.开头*/
        .one{
            color:red;
        }
        .two{
            color:green;
        }
        .three{
            color:blue;
        }
    </style>

    <div class="one">
        这是第一个div
    </div>
    <div class="two">
        这是第二个div
    </div>
    <div class="three">
        这是第三个div
    </div>
</body>
</html>

3、ID选择器

html页面中的每一个元素，都可以设置一个唯一的id，作为元素的身份标识。

通过操作id来选中元素。

类选择器，可以让多个元素应用同一个类。

id选择器，只能针对唯一的元素生效。同一个页面中id的值不能重复

#id名{属性值}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #onediv{
            color:red;
        }
        #twodiv{
            color:blue;
        }

    </style>

<div id="onediv">
    这是第一个div
</div>
<div id="twodiv">
    这是第二个div
</div>

</body>
</html>

4、后代选择器

 <style>
        ul li{
            color:red;
        }
    </style>

先找到ul标签，再找到ul中的li，对li中的元素进行操作。

不一定非要是子元素，只要是后代就行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        ul li{
            color:red;
        }
    </style>

<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

</body>
</html>

5、子选择器

只找匹配的子元素，不找孙子元素之类的，针对性更强。

选择器1>选择器2{属性}

    <style>
        .one>li{
            color:red;
        }
    </style>

只在one类中的子元素里找li标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .one>li{
            color:red;
        }
    </style>

<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

<ul class="one">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

</body>
</html>

6、并集选择器

多组选择器应用同一个样式

选择器1，选择器2{属性}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .two,.three{
            color:red;
            font-size:40px;
        }
    </style>

    <div class="one">
        <a href="#" class="two">链接1</a>
        <p>
            <a href="#" class="three">链接2</a>
        </p>
    </div>
</body>
</html>

让two和three都应用同一种样式

7、伪类选择器

复合选择器的特殊用法。

前面的选择器都是选中某一元素。而伪类选择器是选中某个元素的某个特定状态。

:hover 表示鼠标悬停时的状态

:active 表示鼠标按下时的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .one:hover{
            color:red;
        }
        .one:active{
            color:green;
        }
    </style>
    <div class="one">
        这是一个div
    </div>
</body>
</html>

鼠标未悬停时，字体的颜色为黑色

悬停之后，颜色变为红色

点击之后，字体变绿

三、CSS常用属性

1、字体属性

a. font-family 设置字体家族

这个属性指定的字体，要求必须是系统已经安装了的。

如果要指定的一些特殊字体系统上没有，则不能正确显示。

这种情况一般是需要通过浏览器请求对应的服务器，获取到指定字体文件，才能设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .one{
            font-size: 40px;
            font-family:'微软雅黑';
        }
    </style>

    <div class="one">
        这是一个div
    </div>
</body>
</html>

b. font-size 设置字体大小

浏览器的每一个文字，都可以看作是一个方框。

如果是英文阿拉伯数字，方框比较窄。如果是中文，一般就是一个正方形。

设置font-size:20px；即文字框高度是20px

c. font-weight 设置字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .one{
            font-size: 40px;
            font-family:'微软雅黑';
            font-weight:bold;
        }
    </style>

    <div class="one">
        这是一个div
    </div>
</body>
</html>

d. font-style 设置文字倾斜

e. color 设置文字颜色

RGB，每种颜色都分配一个字节，每个字节的范围是0-255或者00-FF

如果每个分量的两个十六进制数字都相同，则可以把6位十六进制缩写成3位十六进制。

color：rgb(255，0，0);
color: #ff0000;
color: #f00;
color: red;

f. text-slign 设置文本对齐方式

text-align: left;  //左对齐
text-align: right; //右对齐
text-align: center; //居中

g. text-decoration 设置文本装饰

text-decoration: underline;      //下划线
text-decoration: none;           //什么都没有，可以给a标签（超链接）去掉下划线
text-decoration: overline;       //上划线
text-decoration: line-through;   //删除线

h. text-indent 设置首行缩进

文本缩进的值也可以是负数，则往左缩进

text-indent: 40px;
text-indent: 2em;    //em是一个相对的量，是以文字尺寸为基础设置的。

i. line-height 设置行高

line-height: 60px;
line-height:calc(100% - 50px);//这种也可以，CSS中减法运算必须加空格

2、背景属性

a. background-color 设置背景颜色

background-color: rgb(0,255,0);
background-color:rgba(212, 166, 16,0.3);//a是透明度
background-color: green;
background-color: #00ff00;

b. background-image 设置背景图片

background-image: url(图片地址)

当引入背景图片之后，默认情况下，图片是平铺的。

如果不想平铺，则使用

background-repeat: no repeat;
//或者
background-repeat: none;

禁止平铺之后，图片会出现在左上角，如果想让图片居中，则使用

background-position: center center;
//第一个是水平方向居中，第二个是垂直方向居中
//参数可以是，top,center,bottom,right,left

//也可以写成坐标的形式
background-position: 10px 50px;

设置背景图片的大小

background-size: contain;  //尽可能的大，把文字都铺满
background-size: cover;    //充满屏幕
//也可以使用数字

3、圆角矩形

border-radius: 50px;

当border-radius的值刚好是矩形高度height的一半时，则得到圆角矩形

如果想生成圆形，则弄一个正方形，然后border-radius设置为高的一半即可。

四、元素的显示模式

display: block;   //块级元素
display: inline;  //行内元素

关于块级元素和行内元素的区别（前端的经典面试题）

1.块级元素会独占一行，行内元素不独占一行。

2.块级元素的高度，宽度，内外边距都可以设置。而行内元素的高度、宽度、行高无效，内边距有效，外边距有时有效有时无效。

3、块级元素默认宽度和父元素一样宽，行内元素默认宽度和里面的内容一样宽。

五、CSS盒子模型

描述了html元素基本的布局规则。

用来控制元素与元素之间或者元素和内容之间的相对位置。

图片引自http://t.csdn.cn/ICXKb

1、content：内容

2、paddig: 内边距

padding: 10px;                  //表示四个方向都是10px边距
padding: 10px 20px;             //表示上下边距都是10，左右边距是20
padding: 10px 20px 30px 40px;   //分别对应上、右、下、左（顺时针）
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;