首页 > 其他分享> > Day40 css

Day40 css

2019-06-21 22:02:00 作者：互联网

1.css简介

①css的出现解决了下面两个问题：

　　1，将html页面的内容与样式分离

　　2，提高web开发的工作效率

　②何为css

　　　CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

　③css的优势

　　1.内容与表现分离

　　2.网页的表现统一，容易修改

　　3.丰富的样式，使页面布局更加灵活

　　4.减少网页的代码量，增加网页浏览器速度，节省网络带宽

　　5.运用独立页面的css,有利于网页被搜索引擎收录

　④如何使用css？

　　我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

⑤css语法

声明+选择器

2，css引入方式

内接样式
行内样式表
外部样式表
- 链接式
- 导入式

2.1 内接样式

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

2.2 行内样式

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

2.3 外联样式表-链接式（最常用）

# 这是HTML文件内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<div>
    <p>这是一个p</p>
</div>

</body>
</html>

# index.css文件内容（采用的是相对路径）
p{
    color:red;
}

2.3.2 外接样式-导入式

# HTML文件内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        @import url("index.css");
    </style>
</head>
<body>

<div>
    <p>这是一个p</p>
</div>

</body>
</html>


# index.css文件内容
p{
    color:orange;
}

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

3.css的选择器

3.1 基本选择器

①标签选择器

②id选择器（少用，一般用在js中较多）

③类选择器（重点，常用）

详细介绍：

①标签选择器

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“。

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
    font-size: 20px;
}
span{
    color: yellow;
}
复制代码

②id选择器（少用，一般用在js中较多）

　# 加选中id名称

　　　　　　同一个页面中id不能重复。

　　　　　　任何的标签都可以设置id

　　　　　　id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值。

#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

③类选择器（重点，常用）

　　　"." 加选中class名称

　　　　　　所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

　　　　　　类的使用，能够决定前端工程师的css水平到底有多牛逼？

　　　　　　玩类了，一定要有”公共类“的概念。

例子：

# css样式
.lv{
     color: green;
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;
 }

# HTML内容
<!-- 公共类    共有的属性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
     </div>

注意：

CSS优先级，指的是浏览器加载CSS样式的先后顺序。

　　　　　　怎么区分谁的优先级高，很简单，大家只需记住三个数即可。

谁的权值高，一眼就看出来了。我们后面会介绍高级选择器，你记住基础选择器把对应的权值相加得出总权值，就OK了。

3.2高级选择器

①后代选择器

②子代选择器

③交集选择器

④并集选择器

⑤通配符选择器

⑥属性选择器

⑦分组选择器

①后代选择器

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

<head>
div  p{
    color: red;
}
 
div div p{
    color: yellow; #权重大于前者故第二个p标签显示的是黄色。
}
.container div p{
    color: green;
}
</head>
 
<body>
<div>
    <p>我是另一个段落</p>
        <div>
            <p>我是个段落</p>
        </div>
    </p>
</div>
<body>

②子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .container>p{
color: yellowgreen;
}
    </style>
</head>
<body>
    <div class="container">
    <p>我是另一个段落</p>
        <div>
            <p>我是个段落</p>
       </div>
    <p>我是另外一个段落2</p>
</div>
</body>

③交集选择器

　　两个选择器没有连接符号表示交集选择器。

　　比如有一个<h3 class='active'></h3>这样的标签。

<head>
h3{
width:300px;
color: red;
}
 
.active{
font-size: 30px;
}
 
h3.active{
background-color: yellow;
}
</head>
 
<body>
<div>
    <ul>
        <li class="item">
            <h3 class="active">我是一个H3</h3>
            <h4>我是一个h4标题</h4>
        </li>
    </ul>
</div>
</body>

④并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

/*并集选择器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}

比如像百度首页使用并集选择器。

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}

⑤通配符选择器

⑥属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

<style>
    /*根据属性查找*/
# 按照属性查找
    /*[for]{*/
    /*color: red;*/
    /*}*/

    /*找到for属性的等于username的元素 字体颜色设为红色*/
# 具体查找

    /*[for='username']{*/
    /*color: yellow;*/
    /*}*/

    /*以....开头  ^*/
    /*[for^='user']{*/
    /*color: #008000;*/
    /*}*/

    /*以....结尾   $*/
    /*[for$='name']{*/
    /*color: red;*/
    /*}*/

    /*包含某元素的标签*/
    /*[for*="erna"]{*/
    /*color: #00BFFF;*/
    /*}*/

    /*指定标签的属性*/
    label[for='username'] {
        color: green;
    }

    input[type='text'] {
        background: red;
    }
</style>

⑦分组选择器

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

div,p {
  color: red;
}

为div标签和p标签统一设置字体为红色的样式。

伪类选择器

　伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则"  LoVe HAte。

没有访问的超链接a标签样式：

a:link {
  color: blue;
}

访问过的超链接a标签样式：

a:visited {
  color: gray;
}

鼠标悬浮在元素上应用样式：

a:visited {
  color: gray;
}

鼠标点击瞬间的样式：

a:active {
  color: green;
}

input输入框获取焦点时样式：

input:focus {
  outline: none;
  background-color: #eee;
}

例子：

/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
    color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
    color: red;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
    color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
    color: yellowgreen;
}

<div class="box">
    <ul>
        <li class="item1"><a href="#">没有被访问</a></li>
        <li class="item2"><a href="">访问过后</a></li>
        <li class="item3"><a href="">鼠标悬停</a></li>
        <li class="item4"><a href="">鼠标摁住</a></li>
    </ul>
</div>

hover选择器

伪元素选择器

标签：color,标签,样式,red,选择器,css,Day40
来源： https://www.cnblogs.com/longerandergou/p/11067000.html