CSS基础part1-白红宇

CSS基础part1

阅读量：5173 次

发布时间：2019-06-13

本文共 4926 字，大约阅读时间需要 16 分钟。

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义了如何显示 HTML文件中的标签元素，CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector1{        property: value;        property: value;        property: value;}selector2{        property: value;        property: value;        property: value;}

示例：

h1{
   　　color:red; 　　font-size:14px; }

CSS引入方法

行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。


     
      >DIV

嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

链接式

将一个.css文件引入到HTML文件中，如定义文件csstest.css

/*csstest.css，注释行*//*该文件内为纯粹的CSS样式代码，不需要style标签声明*/div{    color: red;    font-size: 30px;    font-weight: 800;}p{    color: aqua;    background-color: bisque;}

示例：

导入式

类似于链接式，都是导入外部的css文件

注意：导入式会在整个网页装载完后再装载CSS文件，因此如果网页比较大或网络不稳定则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，这是链接式的优点。

CSS选择器-基本选择器

基本选择器包括：标签选择器、id选择器、class选择器、通配选择器

标签选择器

按照标签名字进行匹配，上述的嵌入式、链接式和导入式使用的css代码所使用的选择器就是标签选择器，会匹配html文件中所有的div标签和p标签进行样式渲染。

id选择器

按照标签的id进行匹配，将匹配到的id进行渲染，每个html文件中的id在根本上就禁止冲突，所以id是唯一的，所以一条css声明只能匹配一个id

示例：

I am P

class选择器

同id选择器，只不过是将id名字改成class名字，类不唯一，所以能够匹配多条

示例：

             
     
      我是第一个p_ele类
     
        
     
      我是第二个p_ele类

通配选择器

匹配所有的html文件中的标签元素

示例：

I am P

我是第一个p_ele类

我是第二个p_ele类

I am P2

CSS选择器-组合选择器

包括：多元素选择器、后代选择器、子代选择器、毗邻选择器、普通兄弟选择器

后代选择器

子代选择器

多元素选择器

毗邻选择器

普通兄弟选择器

补充

注意，关于标签嵌套：

一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。

CSS选择器-属性选择器

标签中的属性可以自己定义，定义的属性可以没有任何功能，只是为了进行匹配查询

匹配所有带有指定属性的元素

匹配所有指定的key:value的元素

匹配一个属性有多个值，只包含其中一个值的属性

匹配属性值以某个字符串开头的元素

匹配属性值以某个字符串结尾的元素

匹配属性值中包含某个字符串的元素

CSS选择器-伪类选择器

伪类：伪类指的是标签的不通的状态

anchor伪类

专用于控制链接的显示效果

        URL /*井号为不跳转页面，只为当前测试使用*/

注：hover并不是链接专有的属性

hover示例

before/after伪类

:before 在元素之前插入内容

:after 在元素之后插入内容

divdiv

一般用于布局使用

选择器优先级

优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

　　1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000

　　2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100

　　3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

　　4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

示例：可以再加一个行内式测试

PPP

1 文内的样式优先级为1,0,0,0，所以始终高于外部定义。2 有!important声明的规则高于一切。3 如果!important声明冲突，则比较优先权。4 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。5 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

注意

.c1{     color: red!important;    /*无敌的声明*/}

继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

P4

转载于:https://www.cnblogs.com/lidagen/p/7299481.html

你可能感兴趣的文章

语言基础（9）：static, extern 和 inline

查看>>

ES5_03_Object扩展

查看>>

bzoj 2600: [Ioi2011]ricehub

input中的name，value以及label中的for

查看>>