CSS概览

news2024/9/20 18:53:37

概述

是什么

cascading style css 层叠样式表
由W3C制定的网页元素定义规则

为什么

美化

怎么办

设置样式
布局

css 引入

内部样式表

在head标签内部使用style标签

<html>

    <head>

        <style>

            .id{

                width: 400px;

                height: 400px;

                border: 1px solid black;

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <div class="id">

            这是测试内容

        </div>

    </body>

</html>

外部样式表

在head标签中使用link标签引入外部样式表

<html>

    <head>
        <link rel="stylesheet" href="test.css">

    </head>

    <body>

        <div class="id">

            这是测试内容

        </div>

    </body>

</html>

在style 标签内使用 @import 导入外部样式表

<html>

    <head>

        <style>

            @import url("test.css");

            .id{

                width: 400px;

                height: 400px;

                border: 1px solid black;

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <div class="id">

            这是测试内容

        </div>

    </body>

</html>

link 和 @import的区别

@import url(‘名字.css’)
整个网页加载完,才加载样式,可能导致不能及时显示网页的样式
link

内联样式

给标签添加style 属性

 <div class="id" style="background-color: pink;width: 200px;height: 200px">

            这是测试内容

        </div>

css 选择器

通用选择器

*{
font:16px;
}

标签选择器

p{

}

组合选择器

选择器,选择器,选择器n{

}

后代选择器

选择器1 选择器2{

}

类选择器

元素名 . 类选择符名

在这个例子中，p.highlight选择器将选择所有带有highlight类的<p>元素，并将它们的文字加粗且变为红色

<p>这是一段普通文本。</p>
<p class="highlight">这段文本需要高亮显示。</p>
<p>这是另一段普通文本。</p>
p.highlight {
font-weight: bold; color: red; 
}

<div class="box special">这是一个特殊的盒子</div>
<div class="box">这是一个普通的盒子</div>

.box.special {
background-color: green; color: white; 
}
.box {
border: 1px solid #ccc; padding: 10px; 
}

.类选择符名

.box {
border: 1px solid #ccc; padding: 10px; 
}

id选择器

元素名#id选择器名

div#unique-div {
background-color: lightblue; color: white;
padding: 20px; 
border: 2px solid navy; }

#id选择器名

#unique-box {
background-color: yellow; 
color: black; 
padding: 20px;
border: 2px solid black; }

选择器高级

属性选择器

不局限id,class属性,

在这里插入图片描述

伪类选择器

添加到选择器的关键字
指定要选择的元素的特殊状态

div:hover{
鼠标悬停
}
div:active{
选中链接,鼠标按住不放
}

//a特有
a:link{
链接未被访问前
}
a:visited{
访问过的链接状态
}

a:hover 必须置于link,和visited之后
a:active必须置于hover之后

在这里插入图片描述

伪元素选择器

对元素内容一部分设置样式
::伪元素名

首字母和首行伪元素

在这里插入图片描述

::before ::after

在这里插入图片描述

选择器优先级

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

盒模型

页面中所有元素都可以理解为盒模型
组成:
content+padding+border+margin

盒子边框制作三角形

 <!-- 利用盒子边框制作三角形 -->

    <div class="triangle-down"></div>

  



.triangle-down {  

    width: 0;  

    height: 0;  

    border-top: 50px solid transparent;

    border-left: 50px solid transparent; /* 左边框透明 */  

    border-right: 50px solid transparent; /* 右边框透明 */  

    border-bottom: 100px solid black; /* 下边框为黑色，形成三角形 */  

}

元素分类

块元素

diplay:block
独占一行
常见块级元素 : div,p,ui,li,ol,dl,dd,dr,h

行内元素

diplay:inline
一行显示,设置宽高不生效,
行内元素内部不能放块级元素
常见元素:a,img,span,input,label,em,strong

行内块元素

diplay:inline-block
一行显示,设置宽高生效
可以放块级元素

css继承

可继承
样式属性中能继承的一般与字体和文本有关
如font、font-size、color、text-align、text-indent、letterspacing、word-spacing等。

字体和文本属性全都可以被继承，
但a标签不能直接继承父级元素的颜色，一般需要单独设置才能改变超链接及其相关伪类的颜色，也可以通过对a元素设置“color:inherit; ”来继承父级元素的颜色
li会继承父元素ul或ol的list-style属性；
多数边框类的属性，如：border（边框）、padding（填充）、margin（边界）等等，都是没有继承性的。可通过对子元素设置“border:inherit;”来继承父元素的边框属性，但只能继承其直接的父级元素边框属性。填充和边界属性也是同理。

常用属性

字体

在这里插入图片描述

文本

在这里插入图片描述

背景

在这里插入图片描述

常用css3

border-radius
box-shadow
text-shadow
overflow
visibility

布局

文档流布局

普通流布局
默认布局

浮动float

float:none(默认)
float:left
float:right

实现块元素同行排列,一行多列
图文环绕效果

清除浮动影响

浮动元素与普通流元素发生重叠
在这里插入图片描述


<style>

        .wrapper{

            float: left;

            width: 200px;

            height: 200px;

            background-color: pink;

  

        }

        .box{

            width: 500px;

            height: 500px;

            border: 2px solid black;

            clear: both;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        12234r

    </div>

    <div class="box">

        dfwerq

    </div>

</body>

</html>

定位

静态定位 static 默认定位
绝对定位 absolute
==参照物最近已定位元素(都没有就是body)
相对定位 relative
==参照物自己原位置
固定定位 fixed
==参照物浏览器可视窗口
z-index 确定元素的层叠顺序
边偏移属性,用来确定元素的最终位置
top,left,right,bottom

元素居中

水平居中

margin auto

<style>

        .wrapper{

           margin: 0 auto;

            width: 200px;

            height: 200px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div class="wrapper">

  

    </div>

</body>

margin 负值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .wrapper{

            position: absolute;

            left: 50%;

            width: 200px;

            height: 200px;

            background-color: pink;

            margin-left: -100px;

        }

    </style>

</head>

<body>

    <div class="wrapper">

  

    </div>

</body>

</html>