前端三剑客-04css
一丶什么是css
层叠样式表
二丶css注释
CSS注释:/**/
前端语言的注释在使用的时候通常遵循成双成对出现
/*导航条样式开始*/
/*导航条样式结束*/
web框架也有针对html页面的注释
该注释浏览器检查也是看不到的
称之为模板语法的注释
jinja2模块: {# 模板语法注释 #}
三丶css语法结构
选择器 {属性1:值;属性2:值;属性3:值}
3.1基本选择器
元素/标签选择器 直接写标签名
类选择器 点 + 类名
id选择器 # + id值
通用选择器 *
3.2组合选择器
- 后代选择器 空格
- 儿子选择器 >
- 毗邻选择器 +
- 弟弟选择器 ~
3.3属性选择器
标签都可以设置自定义属性
[hobby]
[hobby="jdb"]
input[hobby='xxx']
3.4分组和嵌套
同时选择修改多个标签样式
div, span, p {color:red}
嵌套选择不同类型的标签
#id, .cl, span {color:red}
3.5伪类选择器
- a:link
- a:hover 鼠标悬浮
- a:active
- a:visited
- input:focus input框获取焦点(被点击选中)
3.6伪元素选择器
p:first-letter
p:before
p:after
四丶选择器优先级
- 选择器相同的情况下:就近原则
- 选择器不同的情况下:
行内>id选择器>类选择器>标签选择器
五丶盒子模型
两个快递盒之间的距离(标签与标签之间的距离) 称之为 外边距(margin)
纸盒的厚度(边框) 称之为边框(border)
内部的物品到盒子的距离(内部文本与边框的距离) 称之为 内边距(padding)
物品本身的大小(文本大小) 称之为内容(content)
六丶css属性相关
width 属性可以为元素设置宽度
height 属性可以为元素设置高度
块级标签才能设置宽度，内联标签的宽度由内容来决定。
七丶字体样式
- font-family 字体格式
- font-size 字体大小
- font-weight 字重
- rgb(255,255,255) 颜色
- rgba(255,0,0,0.5) 颜色加上并指定色彩透明度
八丶字体属性
- text-align: center/ left/ right/ justify
- text-decoration: none/underline/overline/line-through
- text-indent: 32px
九丶背景属性
- 颜色：
red
#4e4e4e
rgb(128,128,128)
rgba(128,128,128,0.5) - backgroud-color
- backgroud-image
默认是平铺满这个区域
浏览器窗口可以把它当成一个三维坐标系
横X
竖Y
指向用户的Z - backgroud-repeat: repeat/ no-repeat/ repeat-x/ repeat-y
- backgroud-position: center center 第一个上下 第二个左右
支持简写
backgroud:red url('') no-repeat center center
背景图片应用场景
所有浏览器你能够看到的都是走网路请求传输过来的
当你的网站需要用到很多小图标的时候，可以将所有的小图片放在一张
图片上，然后通过背景图片的位置来控制显示哪一个小图片
从而节省加载资源
十丶边框属性
-
border-style:solid/dotted/dashed
-
border-color:red
-
border-width:5px
支持简写 -
border:3px solid red;
-
border-top/left/right/bottom
十一丶浮动
float
浮动是脱离文档流的 也不再遵循块儿级独占一行的特点
浮动主要用于页面布局
浮动的问题:
浮动会带来父标签塌陷的问题
解决办法:
clear 清除浮动带来的影响
clear: left/ right/ both
.clearfix:after {
content:''
display:block;
clear:both
}
哪里塌陷 就给谁加一个clearfix类属性即可
如果给当前标签加没有效果 那么你可以考虑给目标标签外层
再套一个div 然后给这个新的div加
十二丶是否脱离文档流
脱离
1.浮动
2.绝对定位
3.固定定位
不脱离
1.相对定位
十三丶定位
所有的标签默认都是静态的static 没有定位一说
要想改变标签位置 需要先改变标签位置状态
默认: position:static
1.相对定位 relative
2.绝对定位 absolute
3.固定定位 fixed
溢出属性
overflow:hidden,scroll,auto
十四丶设定z-index
z-index 最大值:1000 最小值:0
十五丶透明度
opacity 范围:0~1
十六丶display
用于控制HTML元素的显示效果。
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。用于隐藏 |
| display:"block" | 默认占满整个页面宽度 |
| display:"inline" | 按行内元素显示 |
| display:"inline-block" | 大白话:不再占一行的块级标签 |
十七丶怎么去除ul样式
ul {
list-style-type: none;
padding-left: 0;
}
