网页装修大法好!!!持续更新
所有内容如下:
CSS的引用方式
法一:
<link rel="stylesheet" herf="xxx" type="text/css">
法二:
<style>
<style>
法三:
<h1 style="" ></h1>
法四
一个css样式依赖其他文件,后者在style标签中使用。可以将css分块,使结构变得清晰
@import url("css文件路径")
选择器
通配符选择器
*{
}
标签选择器
//并列
h1,h2{
}
//子代
h1 h2{
}
类选择器
.类名 {
}
//单一使用
<div class="类名"></div>
//多样式使用
<div class="类名1 类名2 类名3 ..."></div>
id选择器
常用于js的逻辑中,id是唯一的,不建议使用
#id名 {
}
//使用
<div id="id名字"></div>
结构选择器
后代选择器
//只有h1 下面的 h2 中的 h3剩生效,子孙辈都生效
h1 h2 h3{
}
子元素选择器
//只有h1下面的h2中的h3生效,子代生效,孙辈不生效
h1 h2>h3{
}
兄弟选择器
//h1的兄弟h2生效
h1~h2{
}
//紧挨着h1的h2生效
h1+h2{
}
属性选择器
仅仅只有属性的
//单个属性
h1[title]{
}
//使用
<h1 title></h1>
//多个属性
h1[title][id]{
}
//使用
<h1 title id></h1>
包含属性值的
//属性值选择
h1[title=“xxx”]{
}
//使用
<h1 title="xxx"></h1>
//以xxx开始的
h1[title^=“xxx”]{
}
//使用
<h1 title="xxx"></h1>
<h1 title="xxxyyyyyy"></h1>
//以xxx结束的
h1[title$=“xxx”]{
}
//使用
<h1 title="xxx"></h1>
<h1 title="yyyyyyxxx"></h1>
//包含xxx的
h1[title*=“xxx”]{
}
//使用
<h1 title="xxx"></h1>
<h1 title="yyyyyyxxx"></h1>
//里面有某个单词
h1[title~=“xxx”]{
}
//使用
<h1 title="xxx"></h1>
<h1 title="yyy xxx yyy"></h1>
//以xxx开始,或者以xxx开始后面有-链接的
h1[title|=“xxx”]{
}
//使用
<h1 title="xxx"></h1>
<h1 title="xxx-yyy"></h1>
伪类选择器
对元素的不同状态或者不存在的元素进行设置
:link 默认样式
:visited 使用之后的样式
:hover 鼠标移动上去的样式
:active 鼠标点击的样式
:focus 获取焦点
可以用于输入框
例如 :最常用的a标签
a:link{
color :red;
}
a:visited{
color:yellow;
}
a:hover{
color:green;
}
a:active{
color:black;
}
input:focus{
//获取焦点时无外边框
outlin:none
}
:target 目标伪类选择器
可以用于锚点
div:target{
color:red;
}
//使用
<a herf="#xxx">xxxx</a>
<div id="xxx">yyyy</div>
:root 根元素
//一下两个相同
:root{
}
html{
}
:empty 空内容
:empty{
display:none;
}
//使用
<li>xxx<li> //css 不生效
<li></li> //css 生效
结构伪类选择器
注意,结构伪类选择器与标签之间有空格
:first-child
某标签下第一个元素
ul :first-child{
color:red
}
<ul>
<li>xxx</li>
<li>xxxxx</li>
</ul>
:first-of-type
某标签下的按类型选择第一个元素
//ul标签下第一个h1标签
ul h1:first-of-type{
color: brown;
}
<ul>
<li>xxx</li>
<h1>yyyy</h1>
<li>xxxxx</li>
</ul>
:last-child
某标签下的最后一个元素
//选择ul中最后一个元素
ul :last-child{
color: brown;
}
<ul>
<li>xxx</li>
<h1>yyyy</h1>
<li>xxxxx</li>
</ul>
//限制类型,选择ul中最后一个元素,且元素为h2
ul h2:last-child{
color: brown;
}
//无人生效
<ul>
<li>xxx</li>
<h2>yyyy</h2>
<li>xxxxx</li>
</ul>
:only-child
唯一子元素选择器,只有一个孩子的元素被选中
ul :only-child{
color: brown;
}
//再加一个li是不会生效的
<ul>
<li>xxx</li>
</ul>
根据元素编号选择元素
:nth-child(n)
//子代中第n个元素 n从0开始
even 偶数
odd 奇数
n 表示全部
2n 表示偶数
2n-1 表示奇数
ul :nth-child(3){
color: brown;
}
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
:nth-of-type(n)
子代 某类型中的第几个 从第一个开始
ul h1:nth-of-type(3){
color: brown;
}
<ul>
<li>xxx</li>
<li>xxx</li>
<h1>yyy</h1>
<h1>yyy</h1>
<li>xxx</li>
<h1>yyy</h1>
<h1>yyy</h1>
</ul>
:nth-last-child(n)
从最后一个开始取,根:nth-child(n) 一样
:nth-last-of-type(n)
子代 某类型中的第几个 从最后一个开始
排除选择器
:not
//选择前三个,排除第二个
ul :nth-child(-n+3):not(:nth-child(2)){
color: brown;
}
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
表单伪类选择器
/* 禁用的输入框 */
input:disabled{
background-color: aqua;
}
/* 可以用的输入框 */
input:enabled{
background-color: brown;
}
/* 设置被选中的紧挨着的label */
input:checked+label{
color: chartreuse;
}
/* 必须填写的 */
input:required{
background-color: red;
}
/* 非必须填写的 */
/* input:optional{
} */
/* 有效 */
/* input:valid{
} */
/* 无效 */
/* input:invalid{
} */
<form action="">
<input type="text" >
<input type="text" disabled>
<hr>
<input type="radio" checked name="sex">
<label for="boy">男</label>
<input type="radio" name="sex">
<label for="girl">女</label>
<hr>
<input type="text" required>
</form>
文本伪类操作
::first-letter
某文本的第一个字
::first-line
某文本的第一行
::after
在某文本之后增加
::before
在某文本之前增加
权重
id 权重位:100
class,类属性值 权重位 :10
标签、伪元素:1
* 权重位:0
行内样式:1000
权重位大的覆盖权重位小的
权重的计算
1 + 10 + 10 = 21
body .content[title]
强制提升权重
从20提升到最高
.content[title]{
color :red !important
}
元素的继承权重
继承是没有权重的,是无 NULL不是0
子元素定义具体规则之后,父元素的规则会失效
有一些元素是不会继承的,如边框等
通配符的权重是 0 > 无NULL(继承)
文本CSS样式属性
字体
- font-family 属性,一次会赋值多个字体,防止客户电脑上没有该字体
- 自定义字体
@font-face{
font-family:""; //自定义字体名字
src:url("xxx.otf") format("opentype"); //路径,字体类型
}
//定义之后就可以用 font-family 来使用了
字体类型有:
*.otf -> opentype
*.woff -> woff
*.ttf -> truetype
字重、字号
- font-weight:normal;
normal 正常、bload 加粗、也建议用数字400是normal - font-size:100px;
字号、百分比也可以 1em = 100% 倍数
颜色、行高
- color: ;
可以用字符串、也可以用16进制、rgb(255,0,0)、rgba(255,255,255,0.5) - line-height:;
em、px等单位都是可以的,根据字的大小(font-size)来设置行高
组合定义与倾斜风格
- font-style:italic; 倾斜 normal 正常
- font:加粗、倾斜、大小/行高、字体
字符大小写的几种方式
- font-variant:small-caps;//小型的大写
- text-transform:capitalize;//首字母大写等
文本线条的控制
- 删除线:text-decoration:line-through;
- 超链接去除下划线:text-decoration:none;
文本阴影
- text-shadow :颜色 x偏移量 y偏移 模糊量
文本空白与输出
1.在html中有的时候我们想让我们的文字原封不动的显示在界面上,除了使用html中的<pre>标签之外,也可以使用css的
with-space:pre、
with-space:pre-warp、
with-space:pre-line 属性
2.禁止换行,让文本溢出
with-space:nowrap,
配合overflow:hidden 可以截断溢出内容,
text-overflow可以告诉用户,后面还有更多内容
文本缩进与对其
1.text-indent:40px;缩进,建议使用em单位
2.text-align:center;//文本剧中对齐等
3.竖直对其:vertical-align:middle;等,居中对齐,也可以用正负像素
字符间距,排版
1.letter-spacing:20px;字母间距
2.word-spacing:20px;单词间距
3.writing-mode:vertical-rl;排版从左到右等,盘本模式
盒子模型
总体把控
.out{
border: solid 2px black;
}
.in{
border: solid 2px red;
}
<div class="out">
<div class="in">盒子</div>
</div>
如果想让两个盒子分开,可以让外边盒子加内边距padding,也可以让里边的盒子加外边距margin
.out{
border: solid 2px black;
padding: 20px;
}
.in{
border: solid 2px red;
}
<div class="out">
<div class="in">盒子</div>
</div>
细致把控
四周
.out{
border: solid 2px black;
padding: 20px 30px 10px 5px;
上 右 下 左
}
.in{
border: solid 2px red;
}
<div class="out">
<div class="in">盒子</div>
</div>
margin水平居中
当父标签与子标签都设置宽、的时候,才有横向居中
.out{
border: solid 2px black;
width: 400px; //必须有
}
.in{
width: 100px;//必须有
border: solid 2px red;
margin: auto;
}
<div class="out">
<div class="in">盒子</div>
</div>
任何一个标签没有具体的宽度或者高度,都无法达到居中的效果,因为块级元素默认是占满一行的
margin竖直边距合并
.div1{
border: solid 2px black;
height: 80px;
margin-bottom: 90px;
}
.div2{
border: solid 2px black;
height: 80px;
margin-top: 50px;
}
<div class="div1">盒子1</div>
<div class="div2">盒子2</div>
两个竖直的盒子上下排列在一起时,且双方都与对方有margin,那么系统会取他们之间最大的margin值作为他们之间的外边距
盒子尺寸与内边距
原来的尺寸:
.div{
border: solid 2px black;
height: 100px;
width: 100px;
}
<div class="div">盒子</div>
加了padding之后
.div{
border: solid 2px black;
height: 100px;
width: 100px;
padding: 50px;
}
<div class="div">盒子</div>
如果想固定盒子的尺寸,不随着padding变化,可以添加box-size属性
.div{
border: solid 2px black;
height: 100px;
width: 100px;
padding: 50px;
box-sizing: border-box;
}
<div class="div">盒子</div>
边框的使用
直角
.div{
width: 100px;
border-style: groove;/*立体感觉 也可以每个边也定义独立样式*/
border-width:20px ;/*边框宽度*/
border-color: aqua;/*边框颜色*/
border:groove 20px aqua;/*组合写法*/
}
<div class="div">盒子</div>
圆角的使用
不仅可以在块元素上,也可在行元素上使用
.div{
width: 100px;
height: 100px;
border: solid 2px red;
border-radius: 10px; /*也可以用百分比*/
}
<div class="div">盒子</div>
轮廓线
轮廓线跟边框很像,唯一的缺点就是不占用空间位
*{
margin: 0;
padding: 0;
}
.div{
width: 100px;
height: 100px;
outline: groove 20px red;
}
<div class="div">轮廓线</div>
<h2>上边是轮廓线</h2>
元素显示的模式
- display:none; 元素消失
- display:block; 元素转换为块级元素
- display:inline; 元素转换为行级元素
- display:inline-blick; 行级块元素,相较于inliine此模式可以设置宽、高
cursor:pointer; 鼠标形状改变
- display:none; 与 visibility:hidden的区别
.out{
width: 200px;
height: 300px;
border: solid 2px black;
padding: 10px;
}
.div{
width: 100px;
height: 100px;
background-color: blue;
margin-bottom: 10px;
}
div :nth-child(1){
display: none;
/*visibility: hidden;*/
}
<div class="out">
<div class="div">模块1</div>
<div class="div">模块2</div>
</div>
display则没有占位置而visiblity(opacity:0;也可以有这样的效果)是占了一个位置
overflow溢出隐藏
当我们的文本超过指定的边框的大小时,默认时不隐藏的
当设置overflow为auto时,则是超出部分则会出现滚动条,且滚动条时不会消失的
当我们的overflow设置为hidden时,多余的部分会隐藏
配合withte-space:nowrap 与 text-overflow:ellipsis
会出现三个小点的样式
css的尺寸控制
- width:普通宽
- height:普通高
- min-width:最小的宽度
- min-height:最小的高度 内容小于该高度则取此值
- max-width:最大的宽度
- max-height:最大的高度 内容大于这个高度取此值
- 图片或者文章最好不要用width与height设置死了,最好用min或者max约定一个范围,而且min与max最好可以用百分比赋值
css中尺寸
一般浏览器默认字体大小为16px 也有14px的 | |
---|---|
px | 绝对单位,页面按照精确的像素展示,对于ctrl + 滚轮是没有作用的 |
em | 相对单位,基准为font-size,或者父级元素 |
rem | 相对于根节点html字体大小计算,既可以说是相对单位也可以说是 绝对单位,适合适配移动端口,rem对于em可以说是取值较为稳定 |
vw | viewpoint width,视窗宽度(桌面端为可视窗口,移动端 Layout Viewport布局视口,“☞”Visual Viewport视觉视口,Ideal Viewport理想视口),1vw等于1%视窗宽度,使用于移动端适配,对浏览器版本要求较高 |
vh | viewpoint height 视窗宽度,1vh等于1%视窗高度,使用于移动端,同vw |
vmin | vw 与 vh 中较小的哪一个 |
vmax | vw 与 vh 中较大的哪一个 |
% | 百分比 |
in | 寸 1in = 2.54cm |
mm | 毫米 |
pt | 1/72寸 1pt = 4/3 px 绝对单位在文字排版工具中是非常重要的,如word、adboe等,印刷排版中用 |
pc | 1/6寸 1pc = 12点活字 |
ex | 取当前作用效果的字母的x的高度 |