第十一章前端开发-css

1.1.0 css介绍

css是指层叠样式表（Cascading Style Sheets），样式定义如何显示html元素，样式通常又会存在于样式表中。

css优势：

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少代码量，增加网页浏览器速度，节省网路带宽
运用独立页面的css，有利于网页被搜索引擎收录

如何用？

我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可

这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

1.1.1 css语法

css语法分为2个部分：

1.选择器

2.声明

声明由属性和值组成，多个声明之间用分号分隔。

css注释：注释是代码之母

/*这是注释*/

1.1.2 css引入方式

1.1.2.1 内嵌样式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        
        P{
            color: green;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

1.1.2.2 行内样式表

<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签！</p>
</body>
</html>

1.1.2.3 外部样式表

链接式 link标签

#html文件
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
</html>

#index.css文件
p {
  color: green;
}

导入式

了解即可。

index.css

@import url(other.css)

注意：
@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

1.1.2.4 三种引入方式的优先级

行内样式>内嵌式和外接式
内嵌和外接要看谁在后面，在后面的优先级高（代码从上到下执行，在后面的会把前面的覆盖）

1.1.3 css选择器

首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。

1.1.3.1 基础选择器

1.id选择器：特定属性的元素（标签）

标识：#id名
特征：唯一的

2.类选择器

标识：.类名
特征:可以重复，归类，类也可以设置多个

<style>
    .box{
        width:200px;
        height:200px;
        background-color:yellow;
    }
    .active{
        border-radius: 200px;
    }
</style>

<div class='box active'></div>
<div class='box'></div>
<div class='box'></div>

3.标签选择器

与标签有关的

div{}
p{}
ul
ol
...

1.1.3.2 高级选择器

1.后代选择器：中间是空格

eg：div下所有的标签都会选中

div p{
    color: red;
}

2.子代选择器：中间是>号

只找到div标签下面最近的一代

dic>p{
    color:red;
}

3.组合选择器：中间用，连接

        p,span{
            color: green;
            font-size: 15px;
            padding: 0;
            margin: 0;
        }

4.交集选择器:选择器1选择器2{}

div.active{
    color: orange;
}

5.如何重置网页样式？

html,body,p,ul,ol{
    margin: 0;         /*去除外边距*/
    padding: 0;        /*去除内边距*/
}
/*通配符选择器*/
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;      /*去除下划线*/
}
input,textarea{
    border: none;       /*去除默认边框*/
    outline: none;      /*去除外线*/
}

1.1.3.3 伪类选择器

1.对于a标签

如果想设置a标签的样式，要单独作用a标签
对于继承来说，a标签不起作用的

2.爱恨准则：LoVe HAte

L：link
V：visited
H：hover，还可以作用在其他标签上（悬浮时）
A：active

3.符号：使用一个冒号

/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
    /*color: red;*/
}
/*a标签被访问后设置的属性*/
a:visited{
    color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
    color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
    color: deepskyblue;
}

1.1.3.4 属性选择器

1.根据属性，选择符合条件的标签

2.示例：

/*设置所有文本输入框的属性*/
input[type='text']{         
    background-color: red;
}
/*设置所有多选框的属性*/
input[type='checkbox']{
}
/*设置所有提交按钮的属性*/
input[type='submit']{
}

1.1.3.5 伪元素选择器

通过伪元素添加的内容为行内元素

符号：使用两个冒号

/*设置段落第一个字的属性*/
p::first-letter{
    color: red;
    font-size: 20px;
    font-weight: bold;
}
/*在段落开头添加内容*/
p::before{
    content:'@';
}
/*解决浮动布局常用的一种方法*/
/*在段落结尾添加内容*/
p::after{
    content:'$';
}