CSS美化页面

CSS美化页面

CSS概念

Cascading Style Sheet

级联样式表/层叠样式表

表现HTML或XHTML文件样式的计算机语言,包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS基本语法

选择器{
    声明1;
	声明2;
	....
}

声明由 属性:属性值; 的键值对组成。CSS的最后一条声明后的;可写可不写,但是基于W3C标准规范考虑,建议最后一条声明的结束“;”都要写上。

(1)基础选择器

1.标签选择器

HTML标签作为标签选择器的名称,所有该类标签都会使用统一的样式

如< h1>…< h6>、< p>、< img/>、< div>

p{font-size:16px;}
2.类选择器

语法:

 .自定义类名{声明i;}

可在多个元素中使用,差异化选择不同的标签。在修改样式中用的最多。

3.ID选择器

语法:

#自定义ID名{声明i;}

一个id只能在一个标签使用,一般用于唯一性的元素上,经常和JavaScript搭配使用。

4.通配符选择器

语法:

*{声明i;}

选择所有标签(包括html、body标签)统一设置样式.

优先级

(范围越小越优先)

ID选择器 > 类选择器 > 标签选择器 > 通配符选择器

不遵循就近原则,无论哪种方式引入CSS样式,都遵循ID选择器 > 类选择器 > 标签选择器 > 通配符选择器的优先级

(2)高级选择器

1.层次选择器
1.1 后代选择器
E F{声明;}
<!--示例-->
body p{background:red;}

在body中的所有p标签都会修改样式

1.2子选择器
E>F{声明;}
<!--示例-->
body>p{background:pink;}

body下一层的P标签会被修改样式,其他层级的P或者没有子标签P则不会被修改样式

1.3相邻兄弟选择器
E+F{声明;}
<!--示例-->
.active+p{background:green;}

标签中带有class属性值为active的标签往下相邻的P标签会被修改样式,向上相邻以及其他P标签不会被修改

1.4通用兄弟选择器
E~F{声明;}
<!--示例-->
.active~p{background:yellow;}

标签中带有class属性值为active的标签的所有同级下方的P标签都会被修改,上方的P标签以及其他级别的P不会被修改.

2.属性选择器
2.1 E[attr]

如:

a[id]{background:yellow;}

a标签中带有id属性的都会被修改样式

2.2 E[attr=val]

如:

a[id=first]{background:red;}

a标签中只有id属性值为first且没有多个类名或id名的标签才会被修改样式

2.3 E[attr^=val]

如:

a[href^=http]{background:red;}

a标签中href属性值以http开头的标签会被修改属性.

2.4 E[attr$=val]

如:

a[href$=png]{background:red;}

a标签中,href属性值以png结尾的标签会被修改属性

2.5 E[attr*=val]

如:

a[class*=links]{background:red;}

a标签中class属性值只要包含links的标签都会被修改属性

HTML中引入CSS样式

1.行内样式

使用style属性引入CSS样式,

<h1
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值