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

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

作者: 远远暖暖 | 来源:发表于2017-01-04 20:57 被阅读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

相关文章

  • 设计师学习HTML/CSS之路-02

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第2章 认识标签(...

  • 设计师学习HTML/CSS之路-03

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第3章 认识标签(...

  • 设计师学习HTML/CSS之路-04

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第4章 认识标签(...

  • 设计师学习HTML/CSS之路-15

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第15章 css样...

  • 设计师学习HTML/CSS之路-07

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第7章 CSS样式...

  • 设计师学习HTML/CSS之路-08

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第8章 CSS选择...

  • 设计师学习HTML/CSS之路-10

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第10章 CSS格...

  • 设计师学习HTML/CSS之路-12

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第12章 CSS布...

  • 设计师学习HTML/CSS之路-11

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第12章 CSS布...

  • 设计师学习HTML/CSS之路-13

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第13章 CSS代...

网友评论

      本文标题:慕课网HTML+CSS基础教程(9-10章)2.0版

      本文链接:https://www.haomeiwen.com/subject/qccavttx.html