前段知识之CSS

目录

• CSS层叠样式表
  • CSS语法结构：
  • CSS注释语法
  • 引入css的多种方式
• CSS选择器
  • 1. CSS基本选择器
  • 2. CSS组合选择器
  • 3. 分组与嵌套
  • 4. 属性选择器
  • 5. 伪类选择器
  • 6. 伪元素选择器
• 选择器优先级
• CSS样式调节
  • 字体样式
  • 背景属性
• 边框
• emmet语法
• display属性
• 盒子模型
• 浮动(float)
  • 关于浮动的两个特点：
  • 三种取值
• 溢出属性overflow
• 定位(position)
  • 针对定位有四种状态
  • 1.static静态(标签默认的状态 无法定位移动)
  • 2.relative相对定位(基于标签原来的位置) 不脱离文档流的
  • 3.absolute绝对定位(基于某个定位过的父标签做定位) 脱离文档流的
  • 4.fixed固定定位(基于浏览器窗口固定不动) 脱离文档流的
• z-index
• 简易博客页面搭建
• box-shadow 属性
• list-style-type 属性

CSS层叠样式表

主要用来调节html标签的各种样式

思考：页面都有HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们该如何区分标签？

标签的两大重要属性为了区分标签

1. class属性：分门别类 主要用于批量查找
2. id属性：精确查找 主要用于点对点

学CSS流程：1.首先要学习如何查找标签 2.再学习如何调整样式

CSS语法结构：

选择器 {
    样式名1:样式值2;
    样式名2:样式值2;
}

CSS注释语法

/*注释内容*/

引入css的多种方式

1. head内style标签内内部编写(学习的时候使用)
   
   

2. head内link标签引入(标准的方式)
   
   

3. 标签内部通过style属性直接编写(不推荐)
   
   

CSS选择器

1. CSS基本选择器

1. 标签选择器(直接按照标签名查找标签)

div {
	color: red;
}

1. 类选择器(按照标签的class值查找标签)

.c1{
    color: green;
}

1. id选择器(根据标签的id 精准查找标签)

#d1 {
    color: yellow;
}

1. 通用选择器(直接选择页面所有的标签)

* {
    color: blue;
}

2. CSS组合选择器

<p>我是p1</p>
<p>我是p2</p>
<div>我是div1
    <div>我是div2
        <p>我是p3
            <span>我是div1div2p3的span</span>
        </p>
    </div>
    <p>我是div1的p4</p>
    <span>我是div1的span2</span>
</div>
<p>我是ppp</p>
<span>我是span span</span>

针对标签的上下层级以及嵌套有另外的说法
        父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签

1. 后代选择器(空格)

选择只要是<div>元素的内部有的<span>元素
div span {
          color: red;
            }

1. 儿子选择器(大于)

选择所有父级是<div>元素的<p>元素
div>span {
         color: yellow;
            }

1. 毗邻选择器(加号)

<div>元素后面紧挨着的<p>元素
div+p {
          color: yellow;
            }

1. 弟弟选择器(小波浪号)

<div>元素后面所有的<span>元素
div~span {
          color: yellow;
            }

3. 分组与嵌套

# 多个选择器合并查找
div,p,span {
            color: yellow;
        }

#d1,.c1,span {
            color: green;
        }

	div.c1 {  查找class含有c1的div
            color: red;
        }

	div#d2 {  查找id是d2的div
            color: red;
        }

	.c1 p.c2 {  查找含有c1样式值里面的含有c2样式值的p标签
           color: antiquewhite;
        }

4. 属性选择器

	/*[username] {*/	按照属性名查找
    /*    color: red;*/
    /*}*/

    /*[username='jason'] {*/  按照属性名等于属性值
    /*    color: yellow;*/
    /*}*/

    div[username='jason'] {
        color: darkcyan;
    }

5. 伪类选择器

a标签补充说明 针对没有点击过的网址 默认是蓝色的 点击过的则为紫色

!

 a:hover {
            color: orange;
        }
    input:focus {  input获取焦点(被点击)之后采用的样式
			  background-color: red;
    }

6. 伪元素选择器

	     /*p:first-letter {*/
        /*    font-size: 48px;*/
        /*    color: red;*/
        /*}*/
        p:before {		css添加文本无法正常选中
            content: '嘿嘿嘿';
            color: blue;
        }
        p:after {		css添加文本无法正常选中
            content: '呵呵呵';
            color: red;
        }

选择器优先级

    1. 选择器相同 导入方式不同
        就近原则
    2. 选择器不同 导入方式相同
        内联样式 > id选择器 > 类选择器 > 标签选择器

CSS样式调节

字体样式

	font-size:14px 24px 28px 36px	字体代码
    font-weight: lighter;     	  字体粗细
    color:三种模式
        /*color: red;*/
        /*color: #3d3d3d;*/
        color: rgb(186,11,98);
    rgba()最后一个参数还可以控制透明度 0~1

    text-align: center		文本居中
    text-decoration: none;  主要用于a标签取消下划线
    text-indent: 32px;		首行缩进

取色器工具：1. pycharm 2. 截图工具

背景属性

	div {
            width: 800px;
            height: 800px;
            /*background-color: red;*/
            /*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
            /*background-image: url("666.png");*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position: center center;*/
            background:  url("666.png") blue no-repeat center center;
        }
	当多个属性名有相同的前缀 那么可以简写一次性完成

边框

边框属性

• border-width 边框线宽度
• border-style 边框样式
• border-color 边框颜色

边框样式

值	描述
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实现边框

border-left-width: 5xp;
border-left-style: solid;
border-left-color: red;
left(左) right(右) top(顶部) bottom(底部) 对应有四个位置

通常使用简写方式：

选择器 {
    border: 2px solid red;
}
三个样式的顺序可以是不固定的

画圆

div {
    wight: 200px;
    heiht: 200px;
    border-radius: 50%;
}

emmet语法

display属性

用于控制HTML元素的显示效果(行内标签是无法设置长宽的 只有块儿级可以设置)

inline可以让块儿级标签有行内标签属性

block可以让行内标签有块儿级标签属性 如：span 也就可以设置长宽了

display: none	彻底的隐藏标签(页面都不会显示 也不会保留标签的位置)

visibility: hidden	隐藏的不彻底 掩耳盗铃式

盒子模型

我们可以将标签看成是一个盒子(快递盒)

content(内容)	快递包里面的实际物体
padding(内边距、内填充)	物体与内部盒子墙的距离
border(边框)	快递盒的厚度
marigin(外边距)	快递盒之间的距离

/*    !*padding: 20px; 上下左右*!*/
/*    !*padding: 20px 40px;  上下   左右*!*/
/*    !*padding: 10px 20px 30px;上  左右  下*!*/
/*    !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
顺序：上右下左
padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边

margin与padding用法一致

针对标签的嵌套 水平方向可以居中：margin: 0 auto; 0表示上下 auto表示水平

浮动(float)

浮动就是用来做页面布局的

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
  
  

三种取值

left: 向左浮动

right: 向右浮动

none: 默认值 不浮动

浮动带来的影响：浮动的元素是脱离正常文档流的 会造成父标签塌陷

如何解决浮动的影响：clear

解决浮动带来的影响之终极方法：伪元素清除法

先提前写好样式类
.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
	谁塌陷了 就给谁添加clearfix样式类就可以了

ps: 浏览器会优先展示文本内容(如果被挡住)

溢出属性overflow

内容溢出一个元素的框

值	描述
visible	默认值 内容不会被修该会呈现在元素框之外
hidden	内容被修剪 并且其余内容是不可见的
srcoll	内容会被修剪 但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪 则浏览器会被显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow属性的值

div {
            height: 150px;
            width: 150px;
            border: 5px solid greenyellow;
            border-radius: 50%;
            overflow: hidden;
        }
div img {
            max-width: 100%;
        }

max-width属性设置元素的最大宽度。
max-height属性设置元素的最大高度

注意： max-width属性不包括填充，边框，或页边距！

定位(position)

标签在默认情况下都是无法通过定位的参数来移动

针对定位有四种状态

1.static静态(标签默认的状态 无法定位移动)

2.relative相对定位(基于标签原来的位置) 不脱离文档流的

3.absolute绝对定位(基于某个定位过的父标签做定位) 脱离文档流的

4.fixed固定定位(基于浏览器窗口固定不动) 脱离文档流的

.c1 {
    background-color: red;
    height: 100px;
    width: 100px;
    position: relative;
}
.c2 {
    background-color: greenyellow;
    height: 100px;
    width: 200px;
    position: absolute;
    top: 100px;
    left: 100px;
}
.c1 {
    border: 5px solid black;
    height: 100px;
    width: 100px;
    position: fixed;
    right: 100px;
    bottom: 200px;
}

z-index

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)

body {
            margin: 0;
        }
.cover {
            background-color: rgba(127,127,127,0.5);
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            z-index: 100;
        }
.modal {
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 101;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
        }

简易博客页面搭建

1.分析页面结构
	利用布局标签div和span搭建架子
2.先编写网页骨架
	HTML
3.再编写CSS
4.最后编写JS

box-shadow 属性

向 div 元素添加阴影

list-style-type 属性

属性设置列表项标记的类型