coderwhy–前端知识整合包–html/css03
1、CSS文本属性
text-decoration:
- underline:下划线
- overline：上划线
- line-through：中划线（删除）
letter-spacing和wordspacing（正负都行）
-
letter-spacing:字母之间的间距
<head> <style> .one{ letter-spacing:10px; <!--letter-space：-30px;--> } </style> </head> <body> <div class="one"> 456 </div> </body> -
wordspacing
单词之间间距
text-tranform
- 用于设置文字大小写转化
text-indent
-
第一行内容缩进(空格)
<head> <style> .one{ text-indent:20px; } </style> </head> <body> <div class="one"> 456 </div> </body>
text-align
-
用于设置元素内容在元素中水平对齐方式
-
left左对齐
-
right右对齐
-
center中间显示
-
justify两端对齐 //最后一行没有效果，需要单独拿出属性text-align-last：justify去设置
<!--居中对齐 因为div是一个块级元素，所以在div里嵌套div时被嵌套的div需要居中在设置宽度前提下不会出现居中显示的，所以需要在内部divdecss里添加display：inline-block--> <!--原因，因为是块级元素所以div里含有div时，会默认内部嵌套的div是跟外部div，css设置默认一致，若此时内部div设置了宽高，外部div会认为内部div是已经实现外部div的css设置，但内部div因为是块级元素不会被外部div的css设置，此时需要将其内部div设置为行内元素（将内部div设置成为不是块级元素就行了），这时外部div就会认为内部div不是块级元素需要被外部div的css设置--> <head> <style> .one{ text-align:center; bg:#456; } .two{ display:inline-block; width:200px; bg:#789; } </style> </head> <body> <div class="one"> <div class="two"> 123456 </div> </div> </body>
-
font-size
-
决定字体大小 px
<head> <style> .one{ front-size:20px } p{ front-size: 2em } <!--p部分相对div 为2*20px em表示相对于父元素， 也可以设置百分比（基于父元素one的大小换算）--> </style> </head> <body> <div class="one"> 4444444 <p> 123456</p> </div> </body>
font-family
- 设置字体种类
- 可以设置多个字体，如果不同语言需要显示不同字体，将私有的放前面公有的放后面
font-weight
- 字体加粗
font-style
- 设置斜体 默认为italic
font-varient
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8jq2QmhQ-1600922544466)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200709232725811.png)]
line-height
- 用于设置文本的最小行高（可以理解为一行文字所占据的高度 ,但不一定等于文字高度）
- 定义为两行文字基线之间的间距
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jXSRsEq1-1600922544469)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200709233711614.png)]
font
-
缩写属性
-
font: font-varient font-weight font-size/line-height font family
-
.one { font :italic small-caps 700 20px/40px "微软雅黑"; } -
style、varient、weight可以随意调换顺序，/linrheight可以省略不省略必须跟在font-size后面
-
font-size、family不可以调换顺序也不能省略
2、更多选择器（伪类和伪元素）
伪类（pseudo-classes）
类型：动态伪类、目标伪类、语言伪类、元素状态伪类、结构伪类、否定伪类
（1）目标伪类
<head>
:target{
color:aquamarine;
}
</style>
</head>
<body>
<a href="#one">dianji 1</a>
<a href="#one2">dianji 2</a>
<!--达到一种点击后就能改变字体颜色-->
<div id="one">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
<div id="one2" title="test">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
</body>
（2）元素状态伪类
<head>
/*:disabled{
color:aquamarine;
}*/
button[disabled]{
color:red;
}
</style>
</head>
<body>
<button disabled>
button
</button>
<button>
button
</button>
</body>
（3）动态伪类（使用多个伪类时务必注意编写顺序）
eg:a元素（hover必须放在link和visited后面，actice必须放在hover后面才能全部生效 lvfha）
a:link未访问链接
a:visited已访问链接
a:hover鼠标挪到链接
a:active激活链接
注意hover和active可以被其他元素使用
<head>
<style>
a:link{
background-color: aquamarine;
}
a:visited{
background-color: bisque;
}
a:hover{
background-color: blueviolet;
}
a:active{
background-color: cornflowerblue;
}
strong:hover{
font-size: 40px;
}
strong:active{
color: crimson;
}
</style>
</head>
<body>
<a href="#">baidu</a>
<strong>456</strong>
</body>
：focus指当前拥有输入焦点的元素（接收键盘输入就是鼠标点进去）也适用focus
eg：
input:focus{
background: red;
}
（4）结构伪类
：nth-child()（父元素的第几个子元素）
<head>
<!--注意：测试当nth-child中值为2时全变红，尚未找出答案-->
<style>
:nth-child(3){
color:red;
}
/*
:nth-child(2n-1){
color:red;
}
:nth-child(2n+1){
color:red;
}<!--奇数变化-->
:nth-child(2n){
color:red;
}<!--偶数变化-->
<!--n可以为负数，最后任何取值都可以 所以有无数种组合 -n+5、2n+3 。。。。。-->
<!--不同的n组合意味不同第n个元素变化-->
*/
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p><!--red-->
<p>4</p>
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p><!--red-->
<p>4</p>
</div>
<div>
<strong>1</strong><!--red-->
<strong>2</strong><!--red-->
<strong>3</strong><!--red-->
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p><!--red-->
<p>3</p>
</div>
</body>
：nth-last-child（） 跟nth-child用法一样表示倒数第几个
：nth-of-type()、：nth-last-type()
<head>
<style>
<!--忽略其他的只寻找p相关的第偶数个的元素，并对其进行修改-->
<!--含有last就不用说了倒数开始寻找然后修改-->
p:nth-of-type(2n){
color:red;
}
<!--如果前面没有p，则寻找所有元素先关的第偶数个元素然后修改-->
/* p:nth-child(3){
color:blue;
} */
</style>
</head>
<body>
<div>444444</div>
<p>1</p>
<p>2</p><!--red-->
<span>2span</span>
<p>3</p>
<p>4</p><!--red-->
<p>5</p>
<p>6</p><!--red-->
</body>
下面举例
p:nth-of-type(2){background-color:red;}
<body>
<p></p>
<div>
<p></p>
</div>
<div>
<div>
<p></p>
</div>
<p></p>
<p></p><!--red-->
</div>
<p></p><!--red-->
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wJLkGlsI-1600922544472)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710210509415.png)]
：empty
:empty{
height:20px;
background-color:red;
}
<body>
<p></p><!--为空，出现empty内容-->
<div>
<p>3233424</p>
</div>
<div>
<div>
<p>44444</p>
</div>
<p></p><!--为空，出现empty内容-->
<p> </p><!--有空格不算空-->
</div>
<p></p>
</body>
（5）否定伪类
：not（x）：x可以为元素、通用、属性、类、id选择器、伪类喧杂器
<head>
<style>
<!--除了div的所有元素都要被设置-->
:not(div){
color:red;
}
</style>
</head>
<body>
<div>45</div>
<p>45</p>
<span>45</span>
<div>454</div>
</body>
伪元素（可以看做行内元素）
重要：因为是行内元素无法设置宽高，若想设置宽高可以采取display:inline-block进行设置行内块元素
注意任何元素一旦使用伪元素都需要重新设置display，使用伪元素默认变成行内级元素
伪元素两种写法 ：：first-line、：first-line推荐两个：区分伪元素和伪类
（1）::before和::after(请当成元素)
-
在元素前面和后面插入内容，应用一致这里只展示before
-
不支持width
span::before{ content:"44444";<!--展示内容，不能省略，可以是一个图片的url content：url（“”），就算没有展示内容该属性也要加上--> color:red; } <!--默认before是一个元素，这里表示在span前放置44444内容 类比<p style="color:red;">44444</p> --> <body> <span>44446666</span> </body>
（2）first-line：
只适用word-spacing、letter-spacing、text-decoration、text-transform、line-height
3、Emmet语法
生成子代元素
div>p>span>strong类似处理
生成兄弟元素
div+h2+p
div>p +div*3>span
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UfDH0sqT-1600922544476)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710221445701.png)]
分组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vuSKUt3r-1600922544480)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710221746721.png)]
生成元素属性
div#mian(id=mian)、div.one(class=“one”)
div#mian>div.box+p.p1+span.title^div#footer>div.box2
<div id="main">
<div class="box"></div>
<p class="p1"></p>
<span class="title"></span>
</div>
<div id="footer">
<div class="box2"></div>
</div>
生成元素内容
div{jkl}
<div>jkl</div>
div#main.one{jkl}
<div id="main" class="one">jkl</div>
div.box$3
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
隐式标签
.main
<div class="main"></div>
ul>li.item${lie$}*3
<!--这里li可以省略，默认隐式为li而不是div-->
<ul>
<li class="item1">lie1</li>
<li class="item2">lie2</li>
<li class="item3">lie3</li>
</ul>
css相关
.box{
w200=width:200px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNxtBc4O-1600922544482)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710225503323.png)]
4、CSS特性
继承特性
-
有些属性可以继承，子元素无父元素有，则子继承父
-
不能继承的属性可以用inherited强制继承
.box{ width:500px; background-color:blue } img{ width:inherited; } <body> <div class="box"> <p>123</p> <img src="../image/jkl.jpg" alt=""/> </div> </body>注意子元素继承的是父元素的计算值，并不是当初编写的属性的指定值
.box1{ font-size:60px; } .box2{ <!--30px--> font-size:0.5em } <!--继承的是计算完0.5em后的30px而不是0.5em，否则就显示15px了--> <body> <div class="box1"> <div class="box2"> <p>444</p> </div> </div> </body>
层叠特性
-
css允许相同类型属性层叠到一个元素上（没有的直接继承）
-
当一个元素拥有多个选择器我们需要知道各个选择器的权重:默认
-
!important（10000）>内联样式在元素里自己设置的（1000）>id（100）>class、属性选择器、伪类（10）>元素选择器、伪元素（1）
-
若有不同情况需要单独设置选择器的权重比例
#main{ color: blue; font-size:30px; } .box{ color:green; font-size:12px !important; background-color:purple } div{ color:yellow; font-size:40px } <div id="main" class=“box">44444</div> <!--这里color=blue font-size=12px-->.five#radio .one #three{ color: blue; } #box #btn .our div span{ color red; } <!--假设以上标签作用于同一个元素，那字体显示为blue，权重比价比较有一个要点，因为第一个标签的id选择器2个class选择器两个，而第二个id有两个class只有一个--> <!--若第一个只有一个id则显示第二个color，以为第二个id有两个，就是这个规律优先比较最大的，然后相同的话看下一级进行比较-->
css属性使用经验
css不好使：选择器优先级太低、选择器没选中对应元素、css属性使用形式不对（或者根本不支持）、浏览器不支持css属性
附录
color: blue;
font-size:30px;
}
.box{
color:green;
font-size:12px !important;
background-color:purple
}
div{
color:yellow;
font-size:40px
}
.five#radio .one #three{
color: blue;
}
#box #btn .our div span{
color red;
}
<!--假设以上标签作用于同一个元素，那字体显示为blue，权重比价比较有一个要点，因为第一个标签的id选择器2个class选择器两个，而第二个id有两个class只有一个-->
<!--若第一个只有一个id则显示第二个color，以为第二个id有两个，就是这个规律优先比较最大的，然后相同的话看下一级进行比较-->
css属性使用经验
css不好使：选择器优先级太低、选择器没选中对应元素、css属性使用形式不对（或者根本不支持）、浏览器不支持css属性
扫一扫
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
