zoukankan      html  css  js  c++  java
  • css读书笔记2:css工作原理

    css就是一种先选择html元素,然后设定选中元素css属性的机制。
    css选择符合要应用的样式构成一条css规则。


    为文档添加样式的3种方法:

    1.行内样式,直接写在特定标签的style属性中;
    2.嵌入样式,在head元素中嵌入<style type="text/css"></style>,将css规则放入<style>和</style>中;
    3.链接样式,在<head>元素中使用外部的样式表,如:
    <link href="1.css" rel="stylesheet" type="text/css" />

    3种css样式的优先级:
    行内样式 > 嵌入样式 > 链接样式


    css规则命名惯例:

    css规则由选择符和声明2部分组成。选择符用于指定元素,声明又由2部分组成:属性和值。如果选择符由多个元素组成,则用逗号隔开。如果有多条声明,则用分号隔开。简单例子:
    p,h1 {
        color:red;
        font-size:12px;
    }

    用于选择特定元素的选择符分为3种:
    1.上下文选择符。基于祖先或同胞元素选择一个元素:
    a.祖先选择符。用空格符隔开,用于选定某个祖先元素下的元素。如我们需要只改变<aside>元素中的<p>元素:
    aside p {
        color:green;
    }
    b.子选择符。标签2必须是标签1的子元素:
    标签1 > 标签2
    c.临近同胞选择符。标签2必须紧跟在其同胞标签1的后面:
    标签1 + 标签2
    d.一般同胞选择符。标签2必须跟(不一定紧跟)在其同胞标签1后面:
    标签1 ~ 标签2
    e.通用选择符。*是一个通配符,可以匹配任何元素。

    2.ID和类选择符。只要在html中为元素添加了id和class属性,就可以在css选择符中使用ID和类名,直接选中特定区域。ID和class有点不同,ID用来在页面中唯一地标识一个元素,类用来标识一组具有某些相同特征的元素。
    a.类选择符:
    .类名
    b.ID选择符:
    #id属性值

    3.属性选择符。通过元素的属性来定位元素。
    a.属性名选择符。选择带有该属性名的标签名:
    标签名[属性名]
    b.属性值选择符。选择带有值为属性值的属性名的标签名。
    标签名[属性名="属性值"]



    伪类:
    伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标签上。伪类有2种:
    UI伪类(在html元素处于某种状态,如鼠标悬停时,为该元素应用CSS样式);
    结构化伪类(标记中存在某种结构上的关系时,如某个元素是一组元素中的第一个或最后一个,为相应元素应用CSS样式)。

    UI伪类:
    1.链接伪类:
    a:link(默认状态)
    a:visited(用户此前点击过的链接)
    a:hover(鼠标悬停)
    a:active(链接正在被点击,鼠标还没有释放)
    2.focus伪类:
    input:focus(获得焦点)
    3.target伪类:
    如果用户点击一个指向页面中其他元素的链接,则那个元素就是target,可以用:target伪类选中它:
    #cankao:target

    结构化伪类:
    1.:first-child和:last-child(第一个和最后一个子元素)
    2.:nth-child(n) (第n个子元素)



    伪元素:
    伪元素就是文档中若有实无的元素。
    1.::first-letter(首字符)
    2.::first-line(首行)
    3.::before和::after(可用于在特定元素前面或后面添加特殊文字内容),如:
    <p class="age">25</p>
    p.age::before {content:"我的年龄是:"}
    最后浏览器显示出的内容是:
    我的年龄是:25




    css应用机制:
    1.继承:
    css中的元素会继承其祖先元素的css样式。
    2.特指:
    特指度表示一条规则有多明确。一条规则的特指度,由它的选择符中包含多少个标签、类名和ID决定。计算方式:
    计算I(id)-C(class)-E(element)3个值,组成一个3位数,数值大的胜出。也就是说,id的权重大于class大于元素。
    3.层叠:
    层叠就是层叠样式表中的层叠,它是css的核心机制:
    a.包含id的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选择符(详见特指度的计算);
    b.如果几个不同来源都为同一个标签同一个属性定义了样式,行内样式胜过嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。
    规则a胜过规则b。也就是说,如果选择符的特指度更高,就算是后声明的,也会胜出。
    c.设定的样式胜过继承的样式,此时不用考虑特定度。

    个人对css应用机制的理解:
    a.继承得到的永远最小,不考虑特指度;
    b.后设定的大于先设定的;
    c.在所有设定的css中,特指度完爆一切,优先级最高。

  • 相关阅读:
    Javascript定义类(class)的三种方法
    npm命令ionic安装失败cordova安装失败解决方法
    解决类似 Requires: libstdc++.so.6(GLIBCXX_3.4.15)(64bit)的问题
    log_format为Nginx设置日志格式
    Nginx设置日志分割方法
    java和h5 canvas德州扑克开发中(二)
    java和h5 canvas德州扑克开发中(一)
    使用Reaver破解开启了WPS功能的wifi密码(wpa/wpa2)
    在Wifi网络中嗅探明文密码(HTTP POST请求、POP等)
    创建假的wifi热点
  • 原文地址:https://www.cnblogs.com/hqqq/p/5311627.html
Copyright © 2011-2022 走看看