526互联

CSS

发布时间 2023-09-20 20:08:12作者: wolaile1

CSS

1.什么是CSS

  • 如何学习CSS
    1. CSS是什么
    2. CSS怎么用（快速入门）
    3. CSS选择器（重点+难点）
    4. 美化网页（文字、阴影、超链接、列表、渐变....）
    5. 盒子模型
    6. 浮动
    7. 定位
    8. 网页动画（特效效果）

1.1什么是CSS

Cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

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

image-20230706103818022

1,2、发展史

CSS1.0

CSS2.0 DIV（块） + CSS， HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角,阴影，动画....浏览器兼容性~

1.3、快速入门

  • 在html文件中使用css可以使用

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个css程序</title>
    <!--规范。<style> 可以编写css代码
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
            声明4;
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我的第一个css程序</h1>
</body>
</html>

  • css文件中

    • image-20230706114400099

  • 优先级

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个css程序</title>
    <!--规范。<style> 可以编写css代码
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
            声明4;
        }
    -->
    <!--外部样式-->
    <style>
        h1{
            color: red;
        }
    </style>
    <!--内部样式-->
    <link rel="stylesheet" href="./css/style.css">
    <!--./css/style.css文件为单样式文件，通过链接获取,这里为绿色：green-->
</head>
<body>
<!--标题的颜色样式，由就近原则决定，谁离结构标题结构近，就是什么颜色-->
<!--这里因为就近原则，所以为绿色-->
<h1>我的第一个css程序</h1>
</body>
</html>

  • 外部样式的两种写法

    • 链接式

      • <!--./css/style.css文件为单样式文件，通过链接获取-->
<link rel="stylesheet" href="./css/style.css">

    • 导入式

      •  <style>
        @import url("./css/style.css");
 </style>

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器

  1. 标签选择器:选择一类标签

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <style>
    <!--基本选择器方式-->
        h1{
            color: black;
            background-color: beige;
            border-radius: 24px;
        }
        h2{
            color: blue;
            background-color: black;
        }
    </style>
</head>
<body>

<h1>学css</h1>
<h2>学css</h2>

</body>
</html>

  2. 类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .ok{
            color: #363dcc;
        }
        .just{
            color: aqua;
        }

    </style>
</head>
<body>
    
<h1 class="ok">标题一</h1>
<h1 class="just">标题二</h1>
<h1>标题三</h1>

</body>
</html>

  3. id选择器：全局唯一 #id{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器 ： id必须保证全局唯一！
          #id名称{}
          优先级：
            不遵循就近原则，固定的
            id选择器> class选择器> 标签选择器
         */
        #xiaoyuan{
            color: black;
        }
        .xiaoyuan{
            color: #d8b218;
        }
        h1{
            color: #363dcc;
        }
    </style>
</head>
<body>
<h1 id="xiaoyuan">标题1</h1>
<h1 class="xiaoyuan">标题2</h1>
<h1 id="xiaoming">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

    2.2层次选择器

    1. 后代选择器：在某个元素的后面

              /*后代选择器*/
       body p{
            background-color: #00fff2;
        }

    2. 子选择器

              /*后代选择器*/
       body>p{
            background-color: #00fff2;
        }

    3. 相邻兄弟选择器

      /*相邻兄弟选择器， 只有一个，相邻（向下）*/
.active + p{
    background: #a13d30;
}

    4. 通用选择器

      .active~p{
    background: #02ff00;
}

2.3结构伪类选择器

  • image-20230706155530785
  • image-20230706160034514

2.4属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: #00fff2;
            text-align: center;
            color: #221f1f;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性名。 属性名= 属性值（正则）*/
        /*存在id的属性 a[]{}*/
        a[id]{
            background-color: yellow;
        }
        a[id=first]{
            background-color: gainsboro;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="https://www.bilibili.com/" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="iamges/123.html" class="links item">3</a>
    <a href="iamges/123.png" class="links item">4</a>
    <a href="iamges/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

3.美化网页元素

3.1为什们要美化网页

  1. 有效传递页面信息
  2. 美化网页，页面漂亮，才能吸引用户
  3. 凸显页面主题
  4. 提高用户属性

span标签：重点要突出的字，使用span套起来

<span>重点要突出的字<span>

3.2字体

3.3文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐的方式 text-align = center
  3. 首行缩进 text-indent：2em
  4. 行高 line-height 单行文字上下居中
  5. 装饰 text-decoration
  6. 文本图片对齐： vertical-align：middle

3.4列表

/*ul li*/
/*
list-style:
	none:去掉原点
	circle：空心圆
	decimal 数字
	square 正方形
*/

3.5背景

背景颜色

背景图片

div{
	background-image: url("images/tx.jpg")
    /*默认式全部平铺repeat*/
}
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}

3.6渐变

4.盒子模型和边框使用

4.1什么是盒子模型

image-20230707112655127

margin:外边距

padding：内边距

border：边框

4.2边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色

5.浮动

5.1标准文档流

CSS 浮动_w3cschool

块级元素：独占一行

h1-h6 p div 列表

行内元素：不独占一行

span a img strong...

5.2display

  • 方向不可控制

5.3float

  • 可以控制方向，浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~

5.4父级边框塌陷问题

解决方案：

1.增加父级元素的高度~

#father{
    border:1px #000 solid;
    height: 800px;
}

2.增加一个空的div标签，清楚浮动

<div class="clear"><div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}

3.overflow

/*在父级元素中增加一个*/
overflow: hidden;

4.父类添加一个伪类

image-20230707165609560

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

小结：

  1. 浮动元素后面添加空div

    简单，代码中尽量避免空div

  2. 设置父类的高度

​ 简单，元素假设有了固定的高度，就会被限制

  1. overflow

​ 简单，下拉的一些场景避免使用

  1. 父类添加一个伪类： after（推荐）
    1. 写法稍微复杂一点，但是没有副作用，推荐使用！

6.定位

6.1相对定位

image-20230707203113666

6.2绝对定位fixed和固定定位

image-20230707204054826image-20230707204159396

6.3固定定位fixed

image-20230707204839730

6.4 z-index

z-index图层：默认是0，最高无限~999

image-20230707210052183

拓展

  • 前端三语言

    • HTML:页面结构

    • CSS：页面表现

    • JavaScript：页面交互