前端三剑客-04css

一丶什么是css

​ 层叠样式表

二丶css注释

CSS注释:/**/
前端语言的注释在使用的时候一般遵循成双成对出现

/*导航条样式开始*/
    /*导航条样式结束*/

web框架也有针对html页面的注释
该注释浏览器检查也是看不到的
称之为模板语法的注释
jinja2模块: {# 模板语法注释 #}

三丶css语法结构

​ 选择器 {属性1:值;属性2:值;属性3:值}

3.1基本选择器

元素/标签选择器 直接写标签名
类选择器 点 + 类名
id选择器 # + id值
通用选择器 *

3.2组合选择器

1. 后代选择器 空格
2. 儿子选择器 >
3. 毗邻选择器 +
4. 弟弟选择器 ~

3.3属性选择器

标签均可以设置自定义属性
[hobby]
[hobby="jdb"]
input[hobby='xxx']

3.4分组和嵌套

同时选择修改多个标签样式
div, span, p {color:red}
嵌套选择不一样类型的标签
#id, .cl, span {color:red}

3.5伪类选择器

1. a:link
2. a:hover 鼠标悬浮
3. a:active
4. a:visited
5. input:focus input框获取焦点(被点击选中)

3.6伪元素选择器

p:first-letter
p:before
p:after

四丶选择器优先级

1. 选择器相同的状况下:就近原则
2. 选择器不一样的状况下:
   行内>id选择器>类选择器>标签选择器

五丶盒子模型

两个快递盒之间的距离(标签与标签之间的距离) 称之为 外边距(margin)
纸盒的厚度(边框) 称之为边框(border)
内部的物品到盒子的距离(内部文本与边框的距离) 称之为 内边距(padding)
物品自己的大小(文本大小) 称之为内容(content)

六丶css属性相关

width 属性能够为元素设置宽度

height 属性能够为元素设置高度

块级标签才能设置宽度，内联标签的宽度由内容来决定。

七丶字体样式

1. font-family 字体格式
2. font-size 字体大小
3. font-weight 字重
4. rgb(255,255,255) 颜色
5. rgba(255,0,0,0.5) 颜色加上并指定色彩透明度

八丶字体属性

1. text-align: center/ left/ right/ justify
2. text-decoration: none/underline/overline/line-through
3. text-indent: 32px

九丶背景属性

1. 颜色：
   red
   #4e4e4e
   rgb(128,128,128)
   rgba(128,128,128,0.5)
2. backgroud-color
3. backgroud-image
   默认是平铺满这个区域
   浏览器窗口能够把它当成一个三维坐标系
   横X
   竖Y
   指向用户的Z
4. backgroud-repeat: repeat/ no-repeat/ repeat-x/ repeat-y
5. backgroud-position: center center 第一个上下 第二个左右

支持简写

​ backgroud:red url('') no-repeat center center

背景图片应用场景

​ 全部浏览器你可以看到的都是走网路请求传输过来的
​ 当你的网站须要用到不少小图标的时候，能够将全部的小图片放在一张
​ 图片上，而后经过背景图片的位置来控制显示哪个小图片
​ 从而节省加载资源

十丶边框属性

1. ​ border-style:solid/dotted/dashed

2. ​ border-color:red

3. ​ border-width:5px
   ​
   ​ 支持简写

4. ​ border:3px solid red;

5. ​ 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;
}