css的一些基础知识
无CSS
有CSS
1.行内引入
<div style="属性名:属性值;属性名:属性值"></div>
eg:
<div style="color: red; width:20px; height:20px"></div>
-
缺点:1,结构不清晰 后期代码维护困难
2,繁杂 体积大
3,web标准 结构html样式css行为js相分离 行内样式就是没有形成样式和结构相分离
-
用处:行内样式去覆盖文本内容或者文本外样式(建议一个或两个单独样式可以下行内)
2.文本内部引入
<head>
<style>
div {
width:20px;
height:20px;
background:red;
}
</style>
</head>
<body>
<div>
这是一个大盒子
</div>
</body>
- 缺点:不彻底
- 用处:属于自己结构里的样式,作用反问只在当前结构文件内
3.文本外部引入(彻底分离,后期代码好维护)
1.新建一个对应的样式文件 .css
2.通过link标签在head头部引入这样的样式文件
<link rel="stylesheet" href="03-外部样式.css">
rel:说明当前链接资源的类型 stylesheet 样式表
href:路径 地址 有相对和绝对两种
三种引入方式的优先级别
优先级:行内样式 大于 文本内部样式 大于 外部链接样式
选择器
基础选择器:四个
1.
* {
样式的集合; 属性名:属性值;
}
* 全局选择器 选择中所有标签 包含body在内
2.
标签选择器
标签名 {
属性名:属性值;
......
}
eg:(将结构里的所有span标签都挑选回来)
span {
color:red;//选择中所有的span标签,给他加上红色
}
3.
类选择器 给标签起一个类名 class=“a”
eg:
.a {
color:red;
}
4.id选择器 唯一的 给标签起一个id名 用 #id名 来调用
eg:
id="aa"
#aa {
color:red;
}
基础选择器的权重关系(优先级)
**css三大特性:**层叠性 优先级 继承性
继承性:text-,line-,color,font- 大部分具有继承性(父元素遗传给子元素)
id > class >标签选择器
id选择器 | class选择器 | 标签选择器 |
---|---|---|
100 | 10 | 1 |
进阶
基础选择器组合起来就是进阶里面的几种选择器
-
1.群组选择器 选择器1,选择器2,选择器3 { color:blue; }
<style> .a,.b,.c { height:20px; width:20px; } </style> ... <div class=a></div> <div class=b></div> <div class=c></div>
-
2.交集选择器 选择器1选择器2 { color:red;}[注意:选择器1与选择器2之间是没有空格的]
<style> div.q { height:100px; } p.q { color=red; } </style> ... <div class=q></div> <p class=q></p>
-
3.后代选择器 父子关系(不仅仅选择儿子 儿子或者孙子 只要满足条件即可) 父元素选择器【有空格】子元素选择器 { color: red;}
<style> div .box1 { color="red"; /*这里是吧span中的颜色改变了*/ } </style> ... <div> <span class="q1">span1</span> <span class="q2">span2</span> </div> <div class="box1"></div>
-
4.子代选择器 选择器1>选择器2 {color :red;}
<style> .box > a { color="red"; } </style> ... <div class="box"> <a>这是一个链接</a> </div>
-
5.伪类链接选择器(a链接) 选择器:伪类 { 样式 }
a:link 没有被访问 a:visited 访问过后 a:hover 鼠标悬停 a:active 鼠标激活即被点击 注意:一般只用hover eg: div.box:hover { color blue; }
颜色表示
1:red ,blue…
2:rgb表示法 red green blue 均是0—255
3:6位十六进制表示法 #FFFFFF
字体属性
- 字体大小 font-size:16px; 默认16px
- 字体形态 font-style:italic斜体/normal正常 默认normal
- 字体粗细 font-weight:100-900 400正常越小越细越大越粗
- 字体家族 font-family:“楷体”,‘宋体’,‘微软雅黑’ 英文之间有空格就加上单引号或者双引号,如果没有空格就可以直接写
- 行高 line-heigth 盒子高度 垂直对齐常用 text-align 水平对齐常用
font:font-style font-weight font-size/line-height font-family
font:normal 400 30px/1.5 "微软雅黑";
注意:一定按照顺序写!!!!!!!!
文本水平居中和垂直居中
**text-align:center; ** 水平
**line-height:盒子高度; ** 垂直
大小表示法
- px 100px
- em 相对于父元素的字体大小
- rem 相对于html标签的字体大小