CSS

CSS

1. CSS是什么
2. CSS怎么用
3. CSS选择器（重点+难点）
4. 美化网页（文字，阴影，超链接，列表，渐变……）
5. 盒子模型
6. 浮动
7. 定位
8. 网页动画

1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现层（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位、浮动……

2、使用

<style>
    h1{
        color: red;
    }
</style>

​ 如果要在html里写ccss代码，需要写在style里

​ h1：选择器

​

​ 外部引用，html和css分离

css优势：

  • 内容和表现分离
  • 网页结构表现统一，可以复用
  • 样式丰富
  • 利用SEO，容易被搜索引擎收录

css导入方式：

  1. 行内样式：

    啊啊啊

  2. 内部样式：style
  3. 外部样式：新建css文件
  4. 导入式：在style里写@import url("css地址")

3、选择器

3-1、基本选择器

  • 标签选择器

    h1这种

  • 类选择器

    <h1 class="lei">啊啊啊</h1>

    .lei{
 color:red;   
}

  • id选择器

    <h1 id="biaoti">啊啊啊</h1>

    #biaoti{
    
}

    id选择器>类选择器>标签选择器

3-2、层次选择器

  • 后代选择器

    parent p{

}

    parent元素后的所有p元素

  • 子代选择器

    parent>p{

}

    parent元素内部的子元素p（parent下一代，不包括再下一代）

  • 相邻选择器（下一个弟弟选择器）

    brother+p{}

    brother元素后一个相邻的兄弟元素p（只有一个）

  • 兄弟选择器（弟弟选择器）

    brother~p{}

    brother元素后所有兄弟元素p

3-3、结构伪类选择器

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

  1. 设置鼠标悬停在元素上时的样式

  2. 为已访问和未访问链接设置不同的样式

  3. 设置元素获得焦点时的样式

  • ul li:first-child{}ul li:last-child{}

    ul里的第一个和最后一个元素

  • p:nth-child(1){	}

    定位到父元素，选择当前元素的父级元素的第一个子元素，且需要是当前元素，如果例子需要是p，如果选中的第n个元素不为p，则无效

  • p:nth-of-type(1){}

    选中夫元素下的第一个p元素，可以解决上一种方法的问题

  • n:hover{	background: ;}

    可以在鼠标悬停的时候变背景颜色

3-4、属性选择器

正则表达式常用

=绝对等于*=包含^=以……开头$=以……结尾

id+class结合使用

a[id]{}所有含有id元素的a元素

a[id=1]{}id=1的a元素

a[class*=11]{}类名包含11的a元素

a[href^=http]{}href中以http开头的a元素

4、美化

​ text-align：排版（居中之类的）

​ text-indent: 2em;首行缩进

​ height:300px; 高度

​ line-height:300px; 行高，行高和块的高度一致时，就可上下居中

​ text-decoration: underline;下划线

​ 超链接去下划线：text-decoration:none;

​ 文字和图片水平对齐，需要参照物（即超过两个物体）。

img,span{	vertical-align: middle;}

超链接伪类

​ 一般只用hover（鼠标放上去显示）

背景图片

div{    background-image:url("图片地址");}.div1{    background-repeat: repeat-x;}.div2{    background-repeat: repeat-y;}.div3{    background-repeat: no-repeat;}

repeat-x水平平铺，y垂直平铺，no不平铺

5、盒子模型

image-20210718161944566

5.1、什么是盒子模型

​ margin：外边距

​ padding：内边距

​ border：边框

5.2、边框

  1. 粗细

  2. 样式

  3. 颜色

    boder:  1px solid red;

5.3、外边距

margin:0margin:0 1pxmargin 1px 2px 3px

一个参数：上下左右一起

两个参数：第一个上下，第二个左右

四个参数：上右下左（顺时针）

5.4、内边距

padding:0padding:0 1pxpadding 1px 2px 3px

同外边距

5.5、圆角边框

border-radius:50px;border-radius:50px 20px;border-radius:50px 20px 10px 5px;

一个参数：四个角

两个参数：左上右下 右上左下

四个参数：左上右上右下左下（顺时针）

5.6、盒子阴影

box-shadow: 10px 10px 10px yellow;

image-20210718175007510

6、浮动

6.1、标准文件流

块级元素：独占一行

h1-h6, p, div, 列表……

行内元素：不独占一行

span, a, img, strong……

行内元素可以被包含在块级元素中，反之不行

6.2、display

<!--	block 块元素	inline 行内元素	inline-block 块元素但可以内联在一行-->display:none;display:inline;display:block;display:inline-block;

float更常用

6.3、float

float:right;float:left;

左右浮动

6.4、父级边框塌陷问题

clear: right;clear: left;clear: both;左右都不许浮动

  1. 增加父级元素高度

  2. 增加空div，给div清除浮动

  3. overflow

    在父级元素中增加overflow:hidden;

  4. 给父类添加一个伪类：after

    #father:after{    content: '';    display: block;    clear: both;}

    和增加空div一个意思，但可以不写空div，代码中尽量避免空div

小结

  1. 浮动元素后增加空div（不推荐，避免空div）
  2. 设置高度（太固定）
  3. overflow（下拉场景避免能使用）
  4. 添加伪类（推荐，不需要改动原有代码）

6.5、对比

  • display（方向不可控制）
  • float（需要解决父级边框塌陷问题）

7、定位

7.1、相对定位

position: relative;/*然后通过top，left，right，bottom来进行上下左右移动*/top: 10px;

​ 偏移后，仍然在标准文档流中，原来的位置会被保留

7.2、绝对定位

position: absolute;/*偏移方法同相对定位*/

​ 没有父级元素定位的前提下，相对于浏览器定位，如果父级元素存在定位，会相对于父级元素进行偏移，如果想以父级元素为参照物，可使父元素进行相对定位，但不进行偏移，这样父级元素原来位置保留，且让绝对定位以父级元素作为参照物

偏移后，不在标准文档流中，原来的位置不会被保留

6.3、固定定位

position: fixed;/*偏移方法同相对定位*/

​ 会固定在一个位置，滑动页面也会跟着移动，类似返回顶部的按钮那样

6.4、z-index

​ z-index默认为0，最高无限，越高越显示（盖在图层前）

z-index:0;
posted @ 2021-11-30 20:12  Shirooil  阅读(65)  评论(0)    收藏  举报