HTML+CSS学习笔记4
来源:互联网 发布:钢铁出口数据 编辑:程序博客网 时间:2024/06/16 06:52
1、分组选择符
当想为HTML中多个标签元素设置同一个样式时,可以使用分组选择符(,)如:
h1,span{color:red;}
它相当于下面两行代码
h1{color:red;}
span{color:red;}
2、继承
CSS的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定HTML标签元素,而且应用于其后代。:
p{color:red;}
<p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩儿。</p>
将颜色应用于p标签,这个颜色设置不仅仅应用p标签,还应有于p标签中的所有子元素文本,这里子元素为span标签。
但是有一些CSS样式是不具有继承性的。如:border
3、特殊性
有时候我们为同一个元素设置不同的CSS央视代码,那么元素会启用哪一个CSS样式呢?
p{color:red;}.first{color:green;}<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>p和.first都匹配到了p这个标签上,那么会显示那种颜色呢?green是正确的颜色,因为浏览器是根据权值来判断使用那种CSS样式的,权值高的就使用哪种CSS样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.
例如:
p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/注意:还有一个权值比较特殊--继承也有权值但是很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
4、层叠
如果在HTML文件中对于同一个元素可以有多个CSS样式存在并且这多个CSS样式具有相同权重值怎么办?
层叠就是在HTML文件中对于同一个元素可有多个CSS样式存在,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后的CSS样式会被应用。
如:
p{color:red;}p{color:green;}<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>最后p中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。
5、重要性
我们在做网页代码时,有些特殊的情况需要为某些样式设置最高权值,这时候我们就可以使用!important来解决。
如:
p{color:red!important;}p{color:green;}<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时,p段落中的文本会显示为红色注意:!important要写在分号前面。
6、文字排版--字体
我们可以使用CSS样式为网页中的文字设置字体、字号、颜色等样式属性。
body{font-family:"宋体";}上述代码为文字设置字体为宋体。这里注意不要设置不常用的字体,因为如果用户本地电脑上没有设置的字体,就会显示浏览器默认的字体。现在一般网页喜欢设置“微软雅黑”,如:body{font-family:"Microsoft Yahei";} 或 body{font-family:"微软雅黑"}
注意第一种方法比第二种方法兼容性更好一些。
7、文字排版--字号、颜色
可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):
body{font-size:12px;color:#666}
8、文字排版--粗体
我们还可以使用CSS样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面的代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}
在这里大家可以看到,如果想为文字设置粗体是有单独的CSS样式来实现的,而不用为了实现粗体样式而是用h1-h6或strong标签了。
9、文字排版--斜体
以下代码可以实现文字以斜体样式在浏览器中显示:
p a{font-style:italic;}
<p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>\
10、文字排版--下划线
有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面的代码实现:
p a{text-decoration:underline;}
<p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>
11、文字排版--删除线
如果想在网页上设置删除线怎么办?这个样式在电商网站上常会见到:
.oldprice{text-decoration:line-through;}
12、段落排版--缩进
中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面的代码来实现:
p{text-indent:2em;}<p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>
13、段落排版--行间距(行高)
行间距(行高)其设置如下:
p{line-height:1.5em;}<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
14、段落排版--中文字间距、字母间距
中文字间距、字母间距设置:
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现,如下:
h1{ letter-spacing:50px;}...<h1>了不起的盖茨比</h1>这个样式使用在英文单词时,是设置字母与字母之间的间距。
单词间距设置:
如果想设置英文单词之间的间距,可以使用word-spacing来实现。如:
h1{ word-spacing:50px;}...<h1>welcome to imooc!</h1>
15、段落排版--对齐
想为块状元素中的文本、图片设置居中的样式,可以使用text-align样式代码
如下代码可以实现文本居中显示
h1{ text-align:center;}<h1>了不起的盖茨比</h1>同样可以设置居左:
h1{ text-align:left;}<h1>了不起的盖茨比</h1>还可以设置居右:
h1{ text-align:right;}<h1>了不起的盖茨比</h1>
16、元素分类
在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,HTML中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div> 、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<lable>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
17、元素分类--块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block
就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可以设置
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一直),除非设定一个宽度。
- HTML+CSS学习笔记4
- HTML/CSS学习笔记
- HTML CSS学习笔记
- HTML+CSS学习笔记
- HTML + CSS学习笔记
- HTML&CSS学习笔记
- HTML&CSS学习笔记
- HTML、CSS学习笔记
- html&css学习笔记
- HTML+CSS学习笔记
- HTML/CSS学习笔记
- HTML+CSS学习笔记
- html+css学习笔记
- HTML+CSS学习笔记
- html+css学习笔记
- HTML/CSS学习笔记
- HTML&CSS学习笔记
- HTML CSS学习笔记
- 【肠道生态】-CS0005-2017肠道微生态与健康研讨会嘉宾PPT
- 《数据结构与算法-Python语言描述》读书笔记(6)第6章二叉树和树(关键词:数据结构/算法/Python/二叉树/树)
- HDU5914 Triangle(思路)
- 有关continue与break的belabela....
- Java中的equals与==
- HTML+CSS学习笔记4
- 学生系统优化
- DB2数据库decode()函数的用法
- POJ 3070 Fibonacci (矩阵幂运算)
- RNN介绍
- 上传
- SQL[转载]
- springMVC-servlet.xml配置文件的基本配置
- 【机器学习笔记】伯努利分布和高斯分布