网页布局 选择符 选择符权重

网页布局:

先划分上线结构然后再划分左右从外往里写

选择符:作用:对html标签进行选择然后写css样式

一,类型选择符(标签选择符)

用法:所有的html标签都能当做选择符来用

特点:能选择页面中所有的当前同类标签

二,Id选择符:(就相当于身份证号)

语法:

起名字:

<标签 id=”名称”></标签>

id写样式:

#名称{css样式}

Id名特点:

Id有唯一性(单一一个页面只能出现一次) id名称用来划分网页外围结构

扩展:起名规范:

A,起名称不能使用关键字(所有的标签和属性都是关键字)

B,小写英文字母开头,后面可以跟数字,字母,下划线,连字符

C,起没名字尽量反映板块用途

D,起名方法:

1,驼峰命名法:第二个单词首字母大写

2,连字符:box-left

3,下划线:box_left

每一个板块开始,添加注释

一般id名称用来划分网页外围

三,class选择器(类选择器)

语法:

class

<标签 class=”名称”></标签>

class名写样式:

.名称{css样式}  不要忘记名称前面有个点 .

Class名的特点:

A,一个标签可以拥有多个class

B,class名可以重复出现

C,Class名更适合定义一类样式

四:包含选择符:通过父元素找子元素

语法:

父元素选择符 子元素选择符 {css样式}

五:群组选择符

语法说明:把分散的标签合成一组 然后给一组添加样式

选择符1,选择符2,选择3{css样式}

六:通配符

说明:选择当前页面中所有的标签

* {css代码}

例如 *{ margin:0; padding:0;}

margin:盒子外面的间距清零

padding:盒子内部填充清零

七:伪类选择器

alink{colorred}

avisited{colorred}

ahover{colorred}

aactive{colorred}

alink 未访问的连接状态

avisited 已访问的连接状态

ahover(常用) 鼠标滑过连接状态

aactive 鼠标按下去的状态

注:选择符的顺序不能改

ahover{鼠标滑过之后,样式更改}

注:伪类选择器 不一定必须给a添加 hover可以更改自身样式

鼠标滑过父元素,更改子元素样式不能更改父元素样式

鼠标滑过谁就给谁添加:hover

选择符:hover子元素{css样式}

选择符的权重;

Id:选择符 > class选择呢符 > 标签选择符

Id权重:100

Class权重: 10

标签权重: 1

内联样式表: 1000

包含选择符:11 +子元素的和

群组选择符:1 本生权重没有发生变化

通配符:0

伪类选择符:10

注:权重相同的时候,按照后写的执行

提高当前权重:

关键字:!Important

语法:选择符{属性:属性值 !Important} 让当前权重最高

  

右侧打赏一下 代码改变世界一块二块也是爱
原文地址:https://www.cnblogs.com/ht955/p/13762057.html