慕课网HTML+CSS基础教程(9-10章)2.0版

一、CSS继承、层叠和特殊性

1、继承
允许某些样式继承到其后代子元素
比如color可继承,border不能继承。
2、特殊性
当一个元素有不同的CSS代码时,需要根据权值规则来判断使用哪种CSS样式。

继承-----权值0.1(最低)
标签-----权值1
类选择符-----权值10
ID选择符-----权值100(最高)

举个例子:

p span{color:green;}-----权值2
.warning{color:white;}-----权值10
p span.warning{color:purple;}-----权值12
#food .note p{color:pink;}-----权值111```

3、层叠
当一个元素有多个CSS样式且有相同权值的样式时,应用最后面的CSS的样式。(就近原则)

4、重要性
有些样式需要具有最高权值,用!important表示
>语法:
p{color:red!important;}
段落中的文字会显示红色

在开发者没有之定义css样式时,浏览器会按自己的样式显示网页,此时样式的优先级:
浏览器默认样式>网页开发者样式>用户自己设置的样式
但是:!important的优先级高于用户自己设置的样式

## 二、CSS格式排版
1、字体(英文表示兼容性好)
>字体:font-family
如:body{font-family:"Microsoft Yahei";}

2、字号和颜色
>字号:font-size
颜色:color
如:body{font-size:12px;color:#666}

3、粗体、斜体、下划线、删除线
>粗体:font-weight:bold
斜体:font-style:italic
下划线:text-decoration:underline
删除线:text-decoration:line-through
如:a{text-decoration:underline;}

4、缩进、对齐
>缩进:text-indent:2em
(2em为文字的2倍大小)
对齐:text-align:left/center/right
如:
h1{
      text-align:center;
}

5、行间距(行高)
>行间距:line-height:1.5em

6、中文字间距、字母间距
>中文字间距/字母间距:letter-spacing:20px
单词间距:word-spacing:50px
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 8,506评论 0 40
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 第6章 开始学习CSS,为网页添加样式 1、认识CSS样式CSS全称为“层叠样式表 (Cascading Styl...
    夏沫xx阅读 4,669评论 1 11
  • 一、什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下:选择器{ 样式;}在{}之前的部分就是“选...
    空指针的空阅读 3,468评论 0 2
  • 01. 刚看完《黑镜》第三季的第一集,引起了些许共鸣。 在故事里,社交网络的评分已经深深渗透了人们的生活。陌生人一...
    Yiwong阅读 1,326评论 0 1