CSS基础
css语法:选择器{声明};
声明由 css属性:属性值; 组成p{background-color: #ccc;}css属性
width 宽度(单位：px) height 高度（单位:px） background-color 背景颜色(颜色的英文或者十六进制颜色) color 字体颜色 font-size 字体大小 ……
css注释
/*h3{width:300px;}*/ 单行注释
/* p{
width:300px;
height: 300px;
} */多行注释css样式表
1.内部样式表：将css语法写在style标签里面，而style标签写在head里面。作用域是本页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
h3{
width:300px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<h3>内部样式表</h3>
</body>
</html>2.外部样式表：新建一个css文件，在css文件里写css语法.接着在html文件里通过link标签（写在head里面）的href属性链接到该css文件。作用域是只要链接到该css文件的所有html页面。
[注] linkrel="stylesheet"说明链接的是一个样式表文件。test.css文件：
h3{
width:300px;
height:300px;
background-color:red;
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="../css/test.css" />
</head>
<body>
<h3>外部样式表</h3>
</body>
</html>3.内联样式表（行内）：将style作为html属性，将声明（css属性:css属性值;）作为html属性值。作用域是当前元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h3 style="width:300px;height:300px;background-color:red;">内联样式表</h3>
</body>
</html>样式表的优先级
- 前提：出现层叠性（对同一个元素添加相同的css属性）问题的时候，才会有优先级的比较。
- 优先级：内联样式>内部样式,内联样式>外部样式。内部样式与外部样式，誰写在后面，就覆盖前面的相同元素的相同属性。
选择器
1.标签选择器，通过标签名获取元素(相当于人的姓名)
div{
width:200px;
height:200px;
background-color:#666;
}2.类选择器，通过.类名获取元素(相当于人的外号)
.box{
width:200px;
height:200px;
background-color:#666;
}3.id选择器，通过#id名获取元素(相当于人的身份证号码，元素的id有且只有一个)
#box{
width:200px;
height:200px;
background-color: #666;
}[注]类和id选择器的命名规则：英文开头，包含数字、下划线
<div class=box my_box" id="Mybox2">类选择器和id选择器</div>
<div id="box" >id选择器</div>选择器的优先级
- !important>行内样式>id选择器>类选择器>标签选择器>通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
color:orange;
}
.box{
color:grey !important;
}
#Box{
color:green;
}
*{
color:pink;
}
</style>
</head>
<body>
<div class="box" id="Box" style="color:purple;">选择器优先级</div>
</body>
</html>CSS核心属性
字体属性 font
1.字体大小 font-size,单位为px、rem、pt等。
浏览器默认字体大小为16px,最小字体为12px。(9pt=12px,12pt=16px)p{font-size:24px;}2.字体加粗 font-weight,属性值为：bolder更加粗 bold加粗600-900 normal默认正常100-500。
p{font-weight:bold;}3.字体倾斜 font-style,属性值为：normal默认正常 italic倾斜 oblique更倾斜
p{font-style:oblique;}4.字体家族 font-family
该属性的属性值若为中文字体或多个单词组成，则需要加上双引号。若存在多个字体，则用逗号隔开。表示找不到前一个字体时，就用后面的。p{font-family:"Times New Roman","楷体","宋体";}5.字体颜色 color，属性值为：颜色的单词或者十六进制
- 十六进制：0-9 a b c d e f;
- 表示颜色:#000000,前两个0代表红色，中间两个0代表绿色，后两个0代表蓝色.若是所有表示同一颜色的两个数是一样的，则可以省略成三个数字。
div{color:yellow;}
p{color:#ccc;}
span{color:#ff0000;}//红色，可简写为:#f00;
a{color:#00ff00;}//绿色，可简写为:#0f0;
i{color:#0000ff;}//蓝色，可简写为:#00f;文本属性 text
1.文本设置大小写 text-transform，属性值为：lowercase小写 uppercase大写 capitalize首字母大写 none默认不变换。
p{text-transform: none;}2.文本修饰 text-decoration，属性值为：underline下划线 overline上划线 line-through删除线 none默认没有修饰 blink闪烁
p{text-decoration:blink;}3.首行缩进 text-indent,单位:em,以当前字体的大小为基准(可以为负值)
p{font-size:16px;text-indent:-2em}
p{text-indent:2em}//常用，首行缩进2个文字4.字间距 letter-spacing
p{letter-spacing:30px}5.词间距 word-spacing(以空格作为标识符)
p{word-spacing: 30px}6.文本在当前容器中的水平对齐方式 text-align，属性值为：left默认向左 right向右对齐 center居中对齐 justify调整,对英文有效果。
p{
width: 200px;
height: 200px;
font-size:18px;
text-align:center;
}7.文本在垂直方向的对齐方式(行内元素):vertical-align,属性值为：baseline默认以基线对齐 middle中线 top顶线 bottom底线。
a{
font-size:24px;
vertical-align:middle;
}
span{
vertical-align:middle;
}
img{
vertical-align:middle;
}列表属性 list-style
1.列表样式类 list-style-type,属性值为：disc默认实心圆 circle空心圆 square方块 none没有。
2.列表样式图片 list-style-image:url(路径)
3.列表样式的位置 list-style-position,属性值为：outside列表项外边（默认） inside列表项里边。
ul,li{
list-style-type: none;//常用
list-style-image: url("../images/arror.jpg");
list-style-position: inside;
<!--list-style: circle inside;合并写法-->
}
//关于li前面的小图标，一般会给li留个padding的位置，再给li加上背景图片，而且要no-repeat，background-position一般都是0 center边框属性 border
1.边框宽度 border-width
2.边框样式 border-style,属性值为：solid实线 dashed虚线 dotted点线 double双线
3.边框颜色 border-color
div{
width: 200px;
height: 200px;
border-width:3px;
border-style: double;
border-color:red;
<!--border:1px solid #ccc;合并写法-->
}4.改变某条边框的属性值,border-方向left、right、top、bottom）
border-left:2px dashed red;
5.改变某条边框的某个属性的属性值,border-方向-属性(width、style、color)
border-right-style:dotted;
行高 line-height
属性值为:normal(默认) 具体像素值或者数值(eg:44px/2) 百分比(%,基于当前字体尺寸的百分比行间距。) inherit(从父元素继承 line-height 属性的值。)p{
width:100px;
height:30px;
font-size:18px;
text-align:center;
line-height:30px;
}
//常用的文本水平和垂直方向都居中：text-align:center;line-height:numpx;line-height的值与元素的高度一致。背景属性 background
1.背景颜色background-color
2.背景图片background-image:url()
3.背景图片重复background-repeat （repeat默认重复 no-repeat不重复 repeat-x水平方向重复 repeat-y垂直方向重复）
4.背景图片在容器中的位置 background-position:水平方向 垂直方向;属性值可以为数值、方位（leftcenterright、topcenterbottom）。
5.背景图片的固定 background-attachment,属性值为：scroll默认滚动 fixed固定。
div{
width: 800px;
height: 800px;
border:10px solid #ccc;
/*background-color:#ddd;*/
background-image:url("../images/666.jpg");
background-repeat:repeat-y;
background-position:center center;
<!--background:#ddd url("../images/666.jpg") no-repeat center;合并写法-->
background-attachment: fixed;
}浮动 float
- 属性值为：left向左浮动 right向右浮动 none不浮动
1.浮动后的元素会脱离标准流,但是里面的内容不会脱离文档流。
2.浮动后的元素相当于行内块级元素（一行显示多个、可以设置宽高）
3.若是一行放不下所有的浮动元素，则放不下的那个浮动元素会在它上一个元素的最低点开始摆放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.dv1{
width: 650px;
height: 300px;
background: #ccc;
float: left;
}
.dv2{
width: 500px;
height: 200px;
background: pink;
float: left;
}
.dv3{
width: 600px;
height: 300px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
<div class="dv3"></div>
</body>
</html>不透明度 opacity
- 属性值为0-1之间的小数，数值越大越不透明
div{
width:100%;
height:100%;
background:#999;
opacity:0.2;
} 相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT