zoukankan      html  css  js  c++  java

  • 一.CSS工作原理

    CSS全称层叠样式表，它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。是能够真正做到网页表现与内容分离的一种样式设计语言，能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

    CSS规则

    CSS规则实际上就是一条完整的CSS指令，规则声明了要修改的元素和应用给该元素的样式

    为HTML文档添加CSS规则

    有三种方法为HTML文档添加CSS规则：行内样式、嵌入样式、链接样式表

    ①行内样式：写在HTML元素的标签里，比如：

    <P style="font-size: 20px;color: green;">This is a demo!</P>

    ②嵌入样式：写在<style>标签里，一般嵌入在<head>元素内

        <style type="text/css">
        P{color: blue;font-size: 30px;}

    </style>

    ③链接样式表：写在以.css结尾的单独样式表文件中,使用<link>标签进行链接

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

    三种方法的应用范围

    行内样式：只能影响它所在的标签，并且总是覆盖嵌入样式和链接样式的

    嵌入样式：能影响当前的页面，但总是覆盖链接样式，并总被行内样式覆盖

    链接样式：能影响到整个网站，只需使用<link>标签指定样式表即可，但链接样式总会被行内样式和嵌入样式覆盖

    PS：我们还可以使用@import指令，在样式表中引用其他样式表

    CSS文档由一系列CSS规则组成，一条CSS规则实际上就是一条CSS指令，这条指令先选择HTML元素，然后设定选择元素的样式

    下面是一条简单的CSS规则，它把段落背景色设置为绿色

    p{background-color: green}

    CSS基本规则

    一条CSS规则由选择符+声明两部分组成

    选择符：指出要选择的元素

    声明：由属性和值组成，属性指出影响元素哪方面样式，值其实就是属性的一种状态

    在上面的例子中可以看出一条规则从左到右依次是：选择符、左花括号、属性、冒号、值、右花括号

    对基本规则扩展1：多个声明包含在一条规则中

    p{color: green;font-size: 45px;font-weight: bold}

    每个声明后加一个分号，以示分隔

    对基本规则扩展2：多个选择符组合在一起

    h1,h3,p{color: green;font-size: 45px;font-weight: bold}

    选择符之间用逗号分隔

    对基本规则扩展3：多条规则应用于同一选择符

    h1,h3,p{color: green;font-size: 45px;font-weight: bold}

    现在我们想让p段落的背景色为蓝色，可以继续添加一条规则

    p{background-color: blue}

    CSS选择符分类

    所有用于选择特定元素的选择符分为三种：上下文选择符、ID和Class选择符、属性选择符

    上下文选择符

    上下文选择符是一种考虑HTML文档结构的选择符，上下文选择符也叫后代组合式选择符，是以空格分隔标签名的，其格式为：

    标签1  标签2 ｛声明｝

    只有当标签1作为祖先元素存在时，标签2才会被选中

    上下文选择符的最大好处就是可以方便的实现基于位置为HTML元素添加样式，在默认情况样式是应用到页面中的所有元素的，但有时需要给不同“位置”的元素应用不同的样式，比如想给位于article和aside标签中的p标签，分别设置不同的样式（不同颜色）

    下面是要演示的HTML文档

     1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 <link href="style.css" rel="stylesheet" type="text/css">
 7 </head>
 8 <body>
 9 <article>
10     <p>demo in article!</p>
11 </article>
12 <aside>
13     <p>demo in aside!</p>
14 </aside>
15 <p>This text is very important!</p>
16 <P style="font-size: 20px;color: green;">This is a demo!</P>
17 </body>
18 
19 
20 </html>
    HTML文档

     如果只使用

    p{color: red;}

    两个段落都会变成红色

    而通过上下文选择符就可以实现基于“位置”的不同的样式

    article p{color: red;}
aside p{color: green;}

    效果

    特殊的上下文选择符

    ① 子选择符 >

    标签1 > 标签2
    标签2必须是标签1的直接子元素，不能有其他父元素
     1 <section>
 2     <p>
 3         This is a demo p in section
 4     </p>
 5 </section>
 6 <article>
 7     <p>
 8         This is a demo p in article
 9     </p>
10 </article>
    HTML示例代码
    section p{color: red}
article p{color: green}
    ② 紧邻同胞选择符 +
    标签1 + 标签2
    标签2必须紧跟在同胞标签1的后面
    1 <article>
2     <h1>An H1 title</h1>
3     <p>
4         This is a demo p in article
5     </p>
6     <h2>An H2 title</h2>
7     <p>text is a demo</p>
8 </article>
    HTML示例代码
    h1+p{color: green}

    这段代码运行后，只有h1后面的p会被选中，而h2后面的p不会被选中

    ③ 一般同胞选择符 ~
     标签2跟着同胞标签1的后面，不必紧跟
    1 <article>
2     <h1>An H1 title</h1>
3     <p>
4         This is a demo p in article
5     </p>
6     <h2>An H2 title</h2>
7     <p>text is a demo</p>
8 </article>
    HTML示例代码
    h1~p{color: green}

    运行这段代码后 h1和h2后面的p都会被选中

    ④ 通用选择符*
    *一个通配符，匹配任何元素，它有一个非常有用的用法，那就是构成非子选择符
    1 <article>
2     <h1>An H1 title</h1>
3     <p>
4         This is a demo p in article
5     </p>
6     <h2>An H2 title</h2>
7     <p>text is a demo</p>
8 </article>
    HTML示例代码
    h1~*{color: green}

    运行这段代码后h1后面的所有元素都会被选中

    下面是上下文选择符总结结构图

    class和id选择符

    CSS上下文选择符为我们提供了基于位置的定位，而class和id选择符则为了提供了另一套选择元素的方法，使用class和id选择符，不用再考虑文档的层次结构，只需要给HTML元素添加class或id属性即可(可以给id和class属性设置任何值，但不能以数字或特殊字符开头)

     class属性

    基本上每个HTML元素都有class属性，可以按如下方法给HTML元素添加class属性

    1 <body>
2 <article>
3     <h1 class="specialtext">this is a Special text!!</h1>
4     <p>demo in article!</p>
5 </article>
6 <aside>
7     <p class="specialtext">demo in aside!</p>
8 </aside>
9 </body>

    使用class选择符很简单，格式如下

    .类名

    为特定的类添加样式、

    p{color: red;}
.specialtext{font-size: 30px;color: blue;}

    输出如下

    标签带类的选择符

    还可以这样写

    p.specialtext{font-size: 30px;color: blue;}

    上面代码只会选中带有specialtext类的段落，至于标题则不会被选中

    多类选择符

    可以给class属性设置多个值，构成多类选择符，用于特选

    .specialtext{font-size: 30px;color: blue;}

    这段代码会同时选中article中的h1和aside中的p段落，利用多类可以单独选中其他的某个元素

    .specialtext.hidetext{font-size: 20px;color: green;}

    以上代码只会选中h1而不会选中p元素，需要注意的是，多类名之间没有空格

    下面是类选择符用法总结

    id属性

    id选择符格式是

    #属性名{css样式}

    除了前面的" . "变成了"  # " 其他id属性用法与class属性用法相同

    class和id的区别 

    class用于标示一组具有相同特征的元素；id用于在页面中唯一标示一个元素

    1.id可以完成同一页面内的导航

    2.同一个页面内的id值是唯一的，而class值可以有多个，比如多类选择符

    3.用class标示一组具有相同特征的元素，比如下面把boy设置成蓝色，girl设置成红色

    部分示例如下

    <nav>
    <ul>
        <li class="boy"><a href="#">Tom</a></li>
        <li class="girl"><a href="#">Angela</a></li>
        <li class="boy"><a href="#">Jack</a></li>
        <li class="girl"><a href="#">Anne</a></li>
        <li class="boy"><a href="#">Justin</a></li>
    </ul>
</nav>

    CSS样式

    .boy a{color: blue;}
.girl a{color: red;}

    运行效果

    用id实现同一页面导航

    <a href="#playvedio">视频</a>
<article>
    <h1 class="specialtext hidetext">this is a Special text!!</h1>
    <p>demo in article!</p>
</article>
<aside>
    <p class="specialtext">demo in aside!</p>
</aside>
<video id="playvedio" src="movie.ogg" controls="controls">
    您的浏览器不支持 video 标签。
</video>

    当点击【视频】链接时候，会自动跳转到视频播放界面

    如果想返回页面的顶部，只需给id属性“ # ”即

    属性选择符

    属性选择符用于选中任何带有指定属性的标签

    标签名 [属性名]　　

    带有这个属性的标签被选中

    属性值选选择符

    带有指定属性并且赋值的标签才会被选中
  • 相关阅读:
    从 0 开始带你成为消息中间件实战高手
    jenkins升级2.249版本后 节点(Node)配置的启动方式中没有Launch agent via Java Web Star
    Gradle build daemon disappeared unexpectedly (it may have been killed or may have crashed)
    centOS7 gradle版本升级
    使用PDB调试Python程序
    pytest在控制台的方式下提示找不到包
    docker-compose文件详解
    storm案例分析
    strom 简单案例
    springboot实现读写分离
  • 原文地址：https://www.cnblogs.com/tao-zi/p/3172611.html
Copyright © 2011-2022 走看看