龙空技术网

Python全栈 Web(CSS样式表、选择器)

开源那些事儿 460

前言:

现时咱们对“css样式表写法”大体比较注意,看官们都需要知道一些“css样式表写法”的相关资讯。那么小编在网上网罗了一些对于“css样式表写法””的相关内容,希望我们能喜欢,姐妹们一起来学习一下吧!

CSS层叠样式表:

(Cascading Style Sheet)

作用:

装饰和美化页面元素,实现网页的排版布局

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。

CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力

使用:

1.行内样式/内联样式:

特点:

在具体的标签中使用参style属性,引入CSS的样式的代码

语法:

<标签 style=“CSS” 样式声明>

1)样式声明/CSS语句:

对当前元素添加样式

语法:

CSS属性:值;

2)

CSS的样式声明可以是多条

<标签 style=“属性:值; 属性:值;”>

常见的CSS属性:

1》.设置字体大小

属性:

funt-size

取值:

以像素为单位的数值 默认16px

2》.设置字体颜色

属性:

color

取值:

颜色的英文单词

3》.设置背景颜色:

属性:

background-color

取值:

颜色的英文单词

2.文档内嵌/内部样式表:

特点:

将CSS代码与具体的标签相分离,在HTML文档中使用<style></style>标签引入CSS代码

语法:

<style>

选择器1

选择器2

选择器3

...

</syle>

选择器:

使用文档内嵌方式引入CSS样式表时,实现了结构与样式分离

凡是需要自己定义选着器来匹配文档中元素 与其他应用样式

作用:

匹配文档原数为其应用样式

语法:

选择器实际上由两部分组成

选择器(符){

属性:值;

属性:值;

}

标签选择器/元素选择器:

使用标签名作为选择符,匹配文档中所有的标签,并应用样式

注意:

<style></style>

可以写在任意位置 但是基于样式的优先原则,一般写在head里

3.外链方式/外部样式表:

定义外部的.css文件,在HTML中引入即可 真正实现文档与样式表的分离

语法:

在外部样式表中使用选着器来定义样式:

在HTML中用<link>引入CSS文件

样式表的特征:

继承性:

大部分的CSS属性都是可以被继承的

子元素或后代元素都是可继承父元素中的样式的

所有的文本属性都可以被继承

块元素的宽度与父元素保持一致

层叠性:

允许为元素定义多个样式,共同起作用

样式表的优先级:

低~高

1.浏览器的缺省设置:浏览器默认样式

2.文档内嵌/外链方式:在不发生样式冲突时:共同起作用,不冲突时:后来者居上

3.行内样式的优先级最高

CSS的选着器:

作用:

规范页面中哪些元素能够应用声明好的样式

目的:

匹配页面原素

详解:

1.标签选择器/元素选择器:

特点:

将标签名作为选择符,来匹配文档中所有的该标签,包含后代元素

语法:

p{

color: red;

text-decoration: none;

}

2.类选择器:

特点:

通过元素的class属性值进行匹配

语法:

.c1{

样式

}

<p class="c1">文本</p>

类选择器的结合使用:

1.

标签名.类名

表示在指定的标签中匹配的class属性值对应的元素

标签名一定要写在前面

语法:

p.c1{

样式

}

2.

.类名1.类名2(不常用)

3.

标签中使用两个选择器的样式

语法:

<p class="类名1 类名2">

3. ID 选择器:

作用:

HTML中所有的元素都有一个ID属性,主要用来表示元素在文档中的标志具有唯一性

通过元素的ID属性值进行匹配

*通常网页中外围的结构化标签。都使用ID进行标识 具有唯一性

语法:

#nav{

样式

}

<div id="nav">导航条</div>

4.群组选择器:

作用:

为多个选择器设置共同的样式

语法:

div,h1,...{

样式

}

<div></div>

<h1></h1>

...

5.后代选择器:

作用:

依托于元素的后代关系匹配元素

既包含直接子元素和后代子元素

语法:

选择器1 选择器2..{

样式

}

在选择器1对应的元素匹配后代元素,后代元素必须满足选择器2

6.子代选择器:

作用:

依托元素的子代关系进行匹配 只匹配直接子元素

语法:

选择器1>选择器2{

样式

}

在选择器1对应的元素中匹配直接子元素

7.伪类选择器:

1)超链接伪类选择器

2)动态伪类选择器

主要针对元素的不同状态去设置样式

超链接的不同状态

访问前:link

访问后:visited

激活(鼠标按住不放):active

鼠标滑过:hover

其他元素:

鼠标滑过

激活

表单控件:

获取焦点时的状态:focus

对密码框和文本框而言 当用户输入时都视为获取焦点

3)与其他选择器结合使用

设置元素在不同状态下的样式

语法:

a:link{

color:black;

}

如果要给超链接添加伪类选择器 必须按照以下顺序书写

link

visited

hover

active

选择器的优先级:

当多个选择器的样式同时应用到一个元素上时 要按照不同选择器的优先级来应用样式

判断选择器的优先级 主要看选择器的权重(权值)

选择器 权值

标签选择器 1

类选择器/伪类 10

id选择器 100

行内选择器 1000

如果是复杂选择器(后代,子代)

最终权值是是各选择器之和

尺寸单位与颜色取值

尺寸单位

px 像素单位 默认单位

% 参照父元素对应属性的值进行获取

in inch 英寸 1in = 2.54cm

pt 榜 1pt = 1/72 in

cm

mm

颜色单位

1.英文单词

2.rgb(r,g,b) 表示颜色

取值:

每一种三原色的取值范围:0~255

3.rgba(r,g,b,alpha)

设置颜色 还可以调整透明度

三原色的取值范围:0~255

alpha透明度取值:1/0

0:表示透明

1:表示不透明

取小数表示半透明。整数的0可以省略不写 0.5/.5

4.十六进制表示颜色:

三原色的取值为0~255

取值转换为十六进制

表示颜色:

长十六进制 6位表示方法

每两位为一组 代表一种三原色

#ff0000表示红色

短十六进制 3位表示

浏览器会自动对每一位进行重复补全,最终补全为十六进制

元素分类

HTML中标签分为

1. 块元素

特点 :

1. 独占一行,不与其他元素共行显示

2. 可以手动设置宽高

et : div h1 p ul ol table form

2. 行内元素

特点 :

1. 可以与其他元素或者文本共行显示

2. 不能手动设置宽高,元素的大小由内容决定

et : span i b label u s sub sup

3. 行内块元素

特点 :

既可以与其他元素共行显示,也可以手动设置宽高

et : img input

属性 :

可以通过 vertical-align设置行内块元素左右元素与其的垂直对齐方式

取值 : top / middle / bottom

注意 :vertical-align只在行内块元素中使用

行内元素是可以共行显示的,但是如果代码中出现了换行,页面最终效果上,行内元素之间会有空隙

标签: #css样式表写法