zoukankan      html  css  js  c++  java

  • css初识

    目录

    CSS介绍

    CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

    CSS语法

    #每个CSS的样式由两个部分组成:选择器和声明.声明又包括属性和属性值。每个声明之后用分号结束
#CSS注释
	/*这是注释*/

    CSS三种引入方式

    行内引入

    <!--行内引入(内联样式)方式就是在标签的内部添加tyle属性,设置CSS样式-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
</head>
<body>
    <p style="color: blue;background: green">Helloworld</p>
</body>
</html>
<!--color是用来设置字体的颜色,backgroup是用来设置背景色,可以单独设置一个-->

    内部样式

    <!--内部样式(嵌入式)就是将CSS样式集中写在<head>头标签中的style标签中-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div{
            color:red;
            background: blue}
    </style>
</head>
<body>
    <div>HelloWorld</div>
</body>
</html>
<!--在<head>头标签中的style标签中对标签引入CSS样式,如果定义的是div标签,那么body主题标签中的所有div标签的字体都会变成style标签中设置的样式-->
<!--注意在style中引入的CSS样式为CSS语言,注释的时候于HTML不同使用 /*内容*/的方式注释-->

    外部样式(推荐使用)

    <!--外部样式就是将所有要引入的CSS样式,写入到一个单独的文件中,然后在HTML页面中引入即可-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <link rel="stylesheet" href="link.css" type="text/css">
</head>
<body>
    <div>HelloWorld</div>
</body>
</html>
<!--第一步:新建一个CSS文件,文件的格式是:stylesheet-->
<!--第二步:将要引入的CSS样式写在CSS文件中,定义好样式-->
	/*div标签使用*/
    div{
        color:red;
        background: aquamarine;
    }
<!--第三部:在HTMl页面中将CSS样式文件引入进来,在<head>头标签中,使用<link>标签,rel代表的是文件格式,href代表的是文件路径-->

    基本选择器

    元素选择器

    <!--元素选择器就是在style中定义CSS样式,用指定的样式修改指定的标签-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div{
            color:red;
            background: blue}
    </style>
</head>
<body>
    <div>HelloWorld</div>
    <div>你好</div>
    <div>世界</div>
</body>
</html>
<!--元素选择器的方式,在上面的代码中,如果有多个div标签,就会把所有的div标签都改变-->

    ID选择器

    <!--ID属性就是将拥有指定ID值的标签,修改成指定的CSS样式-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        #name{
            color: red;
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="name">HelloWorld</div>
    <div >HelloWorld</div>
    <div >HelloWorld</div>
</body>
</html>
<!--ID选择器是指定ID来使用CSS样式,在HTML页面代码中,ID属性是唯一的,不可以重复-->
<!--#号代表的是ID属性,name指的是值,将ID为name的标签使用CSS样式-->

    类选择器

    <!--类选择器是指定拥有一样class属性的标签使用CSS,点代表的就是class属性,后面是值-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        .python{
            color: red;
            background: antiquewhite;
        }
        div.python{
            color:blue;
            background: antiquewhite}
    </style>
</head>
<body>
    <div id="name">HelloWorld</div>
    <div >HelloWorld</div>
    <div >HelloWorld</div>
    <div class="python">你好</div>
    <div class="python">世界</div>
    <div class="python">helloworld</div>
</body>
</html>
<!--类选择器有两种使用方式,第一种是将所有拥有相同class属性的标签都使用CSS样式,第二种是指某一种标签中拥有相同class属性的使用CSS样式-->

    通用选择器

    <!--通用选择器就是把所有的标签都设置上CSS样式,*代表所有-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        *{color:blue;
            background: antiquewhite}
    </style>
</head>
<body>
    <div>HelloWorld</div>
    <div>你好</div>
    <div>世界</div>
</body>
</html>

    组合选择器

    后代选择器

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div p{
            color: blue;
            background: red;
        }
    </style>
</head>
<body>
<div>
    <div>
        <p><span>子孙</span></p>
    </div>
    <p>儿子</p>
</div>
</body>
</html>
<!--后代选择器指定一个标签内某一个标签使用CSS样式,不管嵌套在哪一层-->

    儿子选择器

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div>p{
            color: blue;
            background: red;
        }
    </style>
</head>
<body>
<div>
    <div>
        <p><span>子孙</span></p>
    </div>
    <p>儿子</p>
</div>
</body>
</html>
<!--后代选择器指定一个标签内某一个标签使用CSS样式,上面的示例中,div的子标签p标签使用css样式,只能是子集,或者说p标签的父级是div标签的都会变-->

    毗领选择器

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div+p{
            color: blue;
            background: red;
        }
    </style>
</head>
<body>
    <p>你好</p>
    <div>不好</div>
    <p>不大的</p>
</body>
</html>
<!--在上面的示例中,紧挨着div标签的p标签,会使用CSS样式,如果有多个p标签只会变一个,就是紧挨这div的,代码是从上往下执行,所以下面的会变,上面的不会变-->

    弟弟选择器

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div~p{
            color: blue;
            background: red;
        }
    </style>
</head>
<body>
    <p>你好</p>
    <div>不好</div>
    <p>不大的</p>
</body>
</html>
<!--在上面的示例中,div标签之后的p标签,都会变,毗邻选择器是只会变一个,弟弟是所有都变,只要是div标签之后的,代码是从上往下执行,所以下面的会变,上面的不会变-->

    过滤选择器

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div.c1{
            color: blue;
            background: red;
        }
    </style>
</head>
<body>
    <p>你好</p>
    <div class='c1'>不好</div>
    <p>不大的</p>
</body>
</html>
<!--在上面的示例中,是指所有div标签中有c1这个类属性的标签,会变,他和后代不同,后代中有空格,这个没有-->

    属性选择器

    <!--属性选择器是选择带有指定属性的元素,或者选择带有指定属性和值的元素-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div[id='name']{
            color: yellow;
            background: red;
        }
         div[id]{
            color: blue;
            background: red;
        }
    </style>
</head>
<body>
    <div id="name">你好</div>
    <div id="n">你好</div>
    <div id="a">你好</div>
</body>
</html>
<!--在上面代码中,div标签中有id属性都会变,还有div标签中有id属性且id值为name的会变,同一个选择器设置两种样式,就和上面的示例一样,都是使用div中的id属性时,那个在下面的样式就会把上一个样式中同样的覆盖掉-->

    分组和嵌套

    <!--分组-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        div,p[id='name']{
            color: yellow;
            background: red;
        }
    </style>
</head>
<body>
    <div id="name">你好</div>
    <div id="n">你好</div>
    <div id="a">你好</div>
    <p>哈哈</p>
    <p>哈哈</p>
</body>
</html>
<!--在设置样式的时候,对多个标签更改样式,以逗号分割,表示这一组的标签都会变-->
<!--嵌套是指多种选择器混合使用,比如.python类内部所有p标签设置样式(后代选择器)-->

    伪类选择器

    示例代码:
<!--可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{  /* a标签访问前设置样式 */
            color:red;
        }
        a:active{  /* a标签鼠标点下去显示样式 */
            color: green;
        }
        a:visited{ /* a标签访问后显示样式 */
            color: pink;
        }
        a:hover{ /* 鼠标悬浮到a标签时显示样式 */
            color:purple;
        }
        div:hover{   /* 鼠标悬浮到div标签时显示样式 */
            background-color: green;
        }
        input:focus{ /* input标签捕获光标时的样式显示 */
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="http://www.92py.com/">校草网</a>
    <div>
    </div>
    <input type="text">
</body>
</html>

    伪元素选择器

    first-letter:文本内容首字母设置

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:first-letter{
            color:red;
            font-size: 40px;/*设置大小*/
        }
    </style>
</head>
<body>
    <div>
        鹅鹅鹅,曲项向天歌
    </div>
</body>
</html>
<!--first是给文本中首字母进行设置,上面的示例中只有第一个鹅会变-->

    before,在元素之前插入内容

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:before{
            content: '?';/*要插入的内容*/
            color:red;
        }
    </style>
</head>
<body>

<div>
    鹅鹅鹅,曲项向天歌
</div>
</body>
</html>
<!--上面的代码中,在每个div标签前面插入一个内容-->

    after,元素之后插入内容

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:after{
            content: '?';
            color:red;
        }
    </style>
</head>
<body>
    <div>
        鹅鹅鹅,曲项向天歌
    </div>
</body>
</html>
<!--上面的代码中,在每个div标签后面插入一个内容,于before正好相反-->

    权重

    img

    权重越高,对应选择器的样式会被优先显示
组合选择器,各选择器的权重相加
权重不进位,11类选择器组合到一起,也没有一个id选择器的优先级大,小就是小
默认css样式是可以继承的,继承的权重为0
权重相同的选择器,谁后写的,用谁的
<a标签设置样式,需要选中设置,不能继承父级标签的样式,是一个比较特殊的,不受继承作用>
<!--在css中有继承,意思是设置一个标签的样式,那么这个标签里嵌套的标签都会变,但是有一些属性是不能继承的比如:border, margin, padding, background等,在css中继承的权重是非常低的,比元素选择器还要低-->
<div {color:'red'!important;}最高级别的权重*****>

  • 相关阅读:
    《剑指Offer》二维数组中的查找
    白话计算机入门书籍--《穿越计算机的迷雾》有感
    Mysql Cluster7.5.6在 windows10 部署安装
    Mysql Cluster7.5.6 windows10 部署安装
    lll
    线程控制
    动态链接库相关知识
    二分查找及其变种简单易懂的模版
    白话 STL next_permutation 原理
    Maven本地上有包还去网上找包
  • 原文地址：https://www.cnblogs.com/luckinlee/p/11621946.html
Copyright © 2011-2022 走看看