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