CSS常用知识（后端开发必备）

最新推荐文章于 2024-04-27 16:48:56 发布

吖吖吖吖吖吖吖吖吖

最新推荐文章于 2024-04-27 16:48:56 发布

阅读量380

点赞数 6

分类专栏：前端文章标签： css

biu

本文链接：https://blog.csdn.net/weixin_51483932/article/details/116377747

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、CSS和HTML的关系

	HTML是网页制作的一个架构，而CSS则是美化这个网页的一个工具
    注意: CSS中style编写格式
        	选择器{
           		 属性：值
    		 }

二、CSS的三种使用方式

（一）直接在属性上加 style=“属性：值”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color:red">中国</h1>
</body>
</html>

（二）在head和body中间加style，在style中编写对应东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 选择器{
            属性：值
    } */
    h1{
        color:rebeccapurple
    }
    
</style>
<body>
    <h1>中国</h1>
</body>
</html>

（三）创建CSS文件，在CSS文件中编写并在HTML中引进来

1.在head中引用

引用方式： head中添加 <link href="CSS文件地址" rel="stylesheet"/> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <link href="css/01.css" rel="stylesheet"/> 
</head>
<body>
    <h1>CSS使用方法3：在head中使用linked</h1>
</body>
</html>

在style中引用(style位于head和body中间）

引用方式：style中添加@import url(对应CSS文件地址)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>CSS使用方法3：在style中使用 @import url(地址) </h1>
</body>
</html>

三、选择器

（一）元素（标签）选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*
    	所有p标签字体都会变成红色
    	(也可以有其它格式设置，本处以颜色红举例)
    	标签选择器会选择所有对应的标签，即p标签
    */
    p{
        color: red;
    }
</style>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
</body>
</html>

（二）类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
        标签里面加上class="名字"
        .class名字  指定的会变成红色，即段落2以红色显示
    	(也可以有其它格式设置，本处以颜色红举例)
    */
    .p2{
        color: red;
    }
</style>
<body>
    <p>段落1</p>
    <p class="p2">段落2</p>
    <p>段落3</p>
    <p>段落4</p>
</body>
</html>

（三）id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
        标签里面加上id="名字"
        # id名字  指定的会变成红色，即段落2以红色显示
        (也可以有其它格式设置，本处以颜色红举例)
    */
    #p2{
        color: red;
    }
</style>
<body>
    <p>段落1</p>
    <p id="p2">段落2</p>
    <p>段落3</p>
    <p>段落4</p>
</body>
</html>

（四）类选择器与id选择器区别

	id选择器比类选择器更有限制，相对来说id选择器更窄一点

（五）选择器组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
        如果两个选择器内部设置相同，那么可以合并两个选择器，中间用逗号隔开
    */
    .p2,#p3{
        color: red;
    }
</style>
<body>
    <p>段落1</p>
    <p class="p2">段落2</p>
    <p id="p3">段落3</p>
    <p>段落4</p>
</body>
</html>

（六）派生选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    /* 
        div 标签 ：所有的标签都会变红（此处以变红为例，当然也可有有其它设置）
    */
    div p{
        color: red;
    }

</style>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <span>
        <p>p6</p>
        <span>
            <p>p7</p>
        </span>
    </span>
    <p>p8</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    /* 
        div > 标签 ：只有最外层的标签都会变红（此处以变红为例，当然也可有有其它设置）
    */
    div > p{
        color: red;
    }

</style>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <span>
        <p>p6</p>
        <span>
            <p>p7</p>
        </span>
    </span>
    <p>p8</p>
</body>
</html>

四、伪类（lhva顺序不可变）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 未点击百度一下之前的颜色 */
    a:link{
        color:rgb(8, 7, 7)
    }
    /* 鼠标放在百度一下上面的样子 */
    a:hover{
        font-size: 50px;
    }
    /* 访问过百度一下的颜色 */
    a:visited{
        color: rgb(161, 15, 15);
    }
    /* 鼠标点住百度一下没松开时候的颜色 */
    a:active{
        color: lawngreen;
    }
</style>
<body>
   <a href="https://www.baidu.com">百度一下</a> 
</body>
</html>

五、属性

（一）文本属性

 ```java
 		font-family       设置文本字体 ———  
         font-size         设置字体尺寸
         font-weight       设置字体的粗细，一般用 normal/bold（加粗）
         color             字体颜色
         text-align        字体对齐方式
         line-height       行高
         text-decoration     文本装饰，none无，underline下划线
         text-indent       文本缩进
 ```

（二）背景属性

		background-image:url("图片地址")     设置背景图片
        background-color          设置背景颜色
        background-position           背景图片的位置
        background-repeat          背景的平铺方式———repeat 图片在垂直水平方向上重复
                                              ———repeat-x  图片在水平方向上重复
                                              ———repeat-y  图片在垂直方向上重复
            								  ——— no-repeat	  图片不重复																	
                                              
        background-attachment：fixed；     背景图片固定

（三）列表属性

		list-style-type:  none 没有标记  disc默认标记（实心圆）
                          circle 标记是空心圆
                          dquare 标记是实心方块
                          decimal 标记是数字
            	          decimal-leading-zero  0开头的数字标记
          				  lower-alpha  upper-alpha  小写大写英文字母

（四）边框属性

		border-width     边框宽度
        border-color     边框颜色
        border-style     边框样式（solid实线）
        可以分别设置上下左右的样式
        border-right右/left左/bottom下-属性

（五）轮廓属性

		边框外面的一条线
        outline-width      轮廓宽度
        outliner-color     轮廓颜色
        outliner-style     边框轮廓样式（solid实线，dashed虚线）

六、定位

（一）默认定位

		块级元素可以改变宽高： h,p,div等，自上而下垂直排列
        行内元素不能改变宽高：a,b,span等，自左向右水平排列

（二）浮动定位

		float: none 不浮动， left贴着左边浮动， right贴着右边浮动
        浮动定位不仅可以靠着左边或右边，还可以消除“块级元素”占一行的特性
        margin 外边距   padding 内边距

（三）相对定位

		和原来的位置进行比较，进行移动定位(偏移)
        position:relative;
		top left  如果是对下和右采用top和left的负值即可实现

（四）绝对定位

		本元素与已定位的祖先元素之间的距离
            如果父级元素定位了，就以父级为参照物
            如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物
            如果爷爷没定位，继续向上找，都没定位的话，body是最终选择
        position: rabsolute;
		top left  如果是对下和右采用top和left的负值即可实现

（五）固定定位

		将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动
        position: fixed;
		top left  如果是对下和右采用top和left的负值即可实现

七、Z轴属性

		如果一个部分有多个元素重叠了，那么就需要使用Z轴属性，定义上下层次	
   	    z-index：值；    谁的值越大，谁的层次越靠前，也就是被显现出来

八、阴影

		box-shadow: 值1 值2 值3 值4 值5;
		1 水平阴影
		2 垂直阴影	
		3 模糊半径
		4 扩张半径
		5 阴影颜色

九、圆角

		border-radius:值;   值可以改变圆角的程度	\
        写一个值代表border-radius:四个角都是这一个值，4个值代表4个角的值
        border-radius:50%; 代表框架是一个圆

十、渐变

（一）径向渐变

		渐变描述的背景颜色,是向外发散，颜色可以多种
		background:radio-gradient(颜色,颜色);

（二）线性渐变

		渐变描述的背景颜色,默认渐变色方向是从上到下，颜色可以多种
        background:linear-gradient(颜色，颜色);
		background:linear-gradient(方向，颜色，颜色);
		方向： to 方向（例如：to top left）
        background:linear-gradient(角度，颜色，颜色);
		角度： 数值deg

十一、背景

（一）背景位置

		背景位置设置必须配合边框
   	    background-origin: 值；
   	    值：border-box 从外边框开始
           padding-box  从内边框开始
           content-box  从内边距（内容）开始

（二）背景大小

		background-size:
					cover 尽可能把照片放进去，但是div必须满，完全覆盖
                    contain  把照片放进去，div不一定铺满，完全适应

吖吖吖吖吖吖吖吖吖

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS常用知识（后端开发必备）

目录一、CSS和HTML的关系二、CSS的三种使用方式（一）直接在属性上加 style="属性：值"（二）在head和body中间加style，在style中编写对应东西（三）创建CSS文件，在CSS文件中编写并在HTML中引进来1.在head中引用在style中引用(style位于head和body中间）三、选择器（一）元素（标签）选择器（二）类选择器（三）id选择器（四）类选择器与id选择器区别（五）选择器组（六）派生选择器四、伪类（lhva顺序不可变）五、属性（一）文本属性（二）背景属性（三）列表属
复制链接

扫一扫

专栏目录