继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

css样式选择器学习笔记

土柠
关注TA
已关注
手记 1
粉丝 0
获赞 8

选择器
ID选择器 #id
类选择器 .class
标签选择器 span
通用选择器 #{}
伪类选择符 a:link a:visited
a:hover a:active
分组选择符 h1,span
注意!
1.ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2.可以使用类选择器词列表方法为一个元素同时设置多个样式。
3.子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
4.继承
某些样式可继承color
不可继承border:1px solid red
5.权值
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/

p{color:red!important;} 最高权值 注意:!important要写在分号的前面
6.层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)
7.body{font-family:"Microsoft Yahei";} 英文,M和Y一定要大写才能显示出来
因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)
8.字体
font-family:设置字体;
font-size:字体大小;
{font-style:italic;}斜体
{text-decoration:underline;}设置字体样式_下划线
{text-decoration:line-through;}_删除线
p{text-indent:2em;}首行缩进2em
p{line-height:2em;}行高 2em
{letter-spacing:10px}文字间隔 或字母间隔
word-spacing单词间距设置
{text-align:center;}文本、图片设置居中样式

font-weight:bold:设置为粗体样式;
font-weight:normal 默认值
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100-0=900 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold

元素分类
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度

常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
小伙伴们你们观查一下右侧代码段,有没有发现一个问题,内联元素之间有一个间距问题,这个问题在本小节的 wiki 中有介绍,感兴趣的小伙伴可以去查看。

常用的内联块状元素有:
<img>、<input>
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

将内联元素a转换为块状元素,从而使a元素具有块状元素特点。a{display:block;}
将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。
div{display:inline;}

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP