美文网首页
HTML&CSS学习笔记 -- CSS(一)

HTML&CSS学习笔记 -- CSS(一)

作者: 生信摆渡 | 来源:发表于2020-01-30 15:07 被阅读0次

    目录:

    学习资料:

    尚硅谷前端HTML5视频_HTML & CSS 核心基础教程(103集实战教学,从入门到精通)

    一、CSS

    CSS,Cascading Style Sheet,层叠样式表,用来为网页创建样式表,通过样式表可以对网页进行装饰,设置字体样式、位置等。

    所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。

    而CSS就可以分别为网页的各个层次设置样式。

    二、层叠样式的类型

    1 内联样式

    将CSS样式编写到元素的style属性当中

    <body>
        <p style="color:red">我是红色的</p>
    <body> 
    

    这种样式成为内联样式,只对当前的元素中的内容起作用

    不方便复用。结构与表现耦合,不方便后期维护,不推荐使用

    2 内部样式

    将CSS样式编写到<head>中的<style>标签里

    <head>
        <style type="text/css">
            p{color:skyblue}
        </style>
    </head>
    

    3 css文件

    将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中。

    在html文件中:

    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    

    href的值是文件路径

    在css文件中:

    p{color:yellow;font-size:200px}
    

    这样使得结果与表现完全分离,实现样式复用、统一样式

    另外也可利用浏览器缓存加快用户访问速度,因为不需要再将css文件读一遍。如果使用内部样式的话,则要重新读一遍。

    三、CSS基础

    1 选择器

    通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上。

    2 声明块

    声明块紧跟在选择器的后面,使用一对{}扩起来。

    声明块是一组一组的名值对结构,是要设置的样式名,是样式的具体值,名与值之间用:隔开

    一个声明块中可以写多个声明,声明之间使用;隔开

    如上例:

    p{color:yellow;font-size:200px}
    

    p为选择器,{}及包括的内容为声明块,此声明块包含两组名值对。

    3 分组/分类

    • class

    为元素设置class属性可以对对此元素进行分类,同一元素可以属于多类,不同类名之间用空格隔开

    用选择器选择元素class属性的格式为:

    属性名.class_name

    例如:

    <body>
        <p class="color yellow">my color is yellow</p>
        <p class="color green">my color is green</p>
    </body>
    
    p.color{background:pink}
    p.yellow{color:yellow}
    p.green{color:green}
    

    效果:

    一共有两句话,第一句话的class为color和yellow,第二句话的class为color和green。

    为这两句话添加相同的分红底色:p.color{background:pink}

    分别设置这两句话的文字颜色:p.yellow{color:yellow} p.green{color:green}

    • id

    可以为元素设置id属性,id,顾名思义代表着特定的某个元素,因此id的值不能复用,而class的值可以复用

    用选择器选择id属性的格式为:

    属性名#id

    例如:

    <body>
        <p id="abc">my color is yellow</p>
        <p id="def">my color is green</p>
    </body>
    
    #abc {color:yellow}
    #def {color:green}
    

    效果:

    4 元素的父子关系

    • 父元素

      直接包含子元素的元素

    • 子元素

      直接被父元素包含的元素

    • 祖先元素

      直接或间接包含后代元素的元素

    • 后代元素

      直接或间接被祖先元素包含的元素

    • 兄弟元素

      同级元素

    5 后代元素选择器

    作用:选中指定元素的后代元素

    语法:祖先元素 后代元素

    例子:

    <body>
        <div class="first">     
            <p id="abc">my color is yellow</p>
            <p id="def">my color is green</p>
            <span>my color is blue</span>
        </div>
        <span>normal span</span>
    </body>
    
    .first p {background:pink}
    .first #abc {color:yellow}
    .first #def {color:green}
    .first span {color:blue}
    

    效果:

    6 子元素选择器

    作用:选中父元素的指定子元素

    语法:父元素>子元素

    7 兄弟选择器

    • 选择紧邻的后面的一个兄弟元素

      语法:前一个元素 + 后一个元素

      为sapn元素后面的p元素设置样式:

      • span + p {}
    • 选中后面的所有兄弟元素

      语法:前一个元素 ~ 后面所有

    8 伪类选择器

    伪类专门用来表示元素的一种特殊的状态,比如:访问过的超链接、普通的超链接、获取焦点的文本框,当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类。

    用法:

    • 正常连接:a:link

    • 访问过的链接:a:visited

    • 鼠标滑过时的链接:a:hover

    • 正在点击的链接:a:active

    <body>
        <div><a href="http://www.baidu.com" target="_blank" class="a1">百度</a></div>
    </body>
    
    .a1:link{color:red}
    .a1:visited{color:orange}
    .a1:hover{color:grey}
    .a1:active{color:black}
    

    9 否定伪类

    否定伪类语法:p:not(.class_name) {}

    例如:

    • 为所有的p元素设置一个北京颜色,除了class值为hello的p元素:
      • p:not(.hellow) {}

    10 伪元素

    使用伪元素来表示元素中的一些特殊的位置-

    • 首字母:p:first-letter{}
    • 首行:p:first-line{}
    • 元素最前端的部分:p:first-letter{}
    • 元素最后端的部分:p:first-letter{}
    p:first-letter{color:red}
    p:first-line{background:pink}
    p:before{content:"我在p元素前面 "}
    p:after{content:" 我在p元素后面"}
    

    11 title属性

    title属性可以给任何标签指定标题,即当鼠标移入到元素上时,元素的title属性将会作为提示弹出显示

    • 为含有title属性值的元素设置样式:

    p[title_name]{}

    • 为特定title值得元素设置样式

    p[title_name=""]{}

    • 为title值以特定字符开头的元素设置样式

    p[title_name^=""]{}

    • 为title值包含特定字符的元素设置样式

    p[title_name$=""]{}

    12 样式的继承

    给父级元素设置样式,子级则继承

    但不是所有的样式都会被继承,如背景样式

    13 选择器的优先级

    当使用不同的选择器(class、title、style、id、*)选中同一元素时,要遵循优先级:

    • 内联样式(style属性):1000
    • id:100
    • 类和伪类:10
    • 元素选择器:1
    • 通配符:0
    • 继承:没有

    当选择器中包含多种选择器时,需要将多种选择器的优先级值相加再相加。但是,选择器的优先级值相加不会超过它的最大数量级。

    如果选择器的优先级一样,则使用靠后的样式。

    相关文章

      网友评论

          本文标题:HTML&CSS学习笔记 -- CSS(一)

          本文链接:https://www.haomeiwen.com/subject/vcgbthtx.html