CSS基础

困了吃慕斯

已于 2023-08-03 08:23:06 修改

阅读量24

点赞数

分类专栏：前端的薄弱基础文章标签： css 前端

于 2023-08-02 18:41:36 首次发布

本文链接：https://blog.csdn.net/zwb0303/article/details/132067481

版权

前端的薄弱基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS基础

CSS
CSS选择器
颜色
import与link的区别

CSS

层叠样式表
html和css结构样式分离，写法上html属性和属性值用=拼接，css属性和属性值用：拼接

内联样式

style

<p style="background-color: hsl(311, 42%, 54%);">这是第一段话</p>

内部样式

在head(头部)中写style与样式属性

	 <style>
        /* 全局选择器*/
        *{
            margin: 0;
            padding: 0;
            text-align: center;
        }
        /* 标签选择器 */
        body{
            background-image: url(图片路径);
        }
     </style>

外部样式

在外部创建一个css文件通过link链接过来

<link rel="stylesheet" href="xxx.css">

层叠，冲突，继承

层叠：同一个元素（标签）使用了不同的样式表，所有的样式进行叠加
冲突：同一个元素设置相同的属性会造成冲突，遵循就近原则，选择属性
继承：在子父关系中，文本样式可以被继承，布局样式不能被继承（块级元素可以继承宽，行级不可以）

优先级

style 行间 > id > class >tag > *>继承
注：!important强制优先

CSS选择器

标签选择器

		/* 标签选择器 */
        body{
            background-image: url(图片路径);
        }

全局选择器 *

		/* 全局选择器*/
        *{
            margin: 0;
            padding: 0;
            text-align: center;
        }

class选择器 .

	<head>
		<style>
			/* class选择器，可以将其给予多个; . */
        .four{
            background-color: hsla(135, 60%, 60%, 0.438);
        }
        </style>
     </head>  
     <body>
     		<p class="four">这是第四段话</p>
     </body>

id选择器 #

	<head>
		<style>
			/* id选择器，id是唯一; # */
        #two{
            background-color: #48daa7;
        }
        </style>
     </head>  
     <body>
     		<p id="two">这是第二段话</p>
     </body>

群组选择器，

	<head>
		<style>
		/* 群组选择器 */
        b,i{
            background-color: rgba(100, 200, 300, 0.5);
        }
        </style>
     </head>  
     <body>
     		<b>我是加粗</b>
    		<i>我是倾斜</i>
     </body>

层次选择器

	<head>
		<style>
			/* 子代选择器 */
       	 	#five>li{background-color: aqua;}
        	/* 后代选择器 */
       		#six ul{background-color: yellowgreen;}
        	/* 相邻兄弟选择器 */
        	li+b{background-color: pink;} 
        	/* 通用兄弟选择器 */
        	li~b{background-color: pink;}
		</style>
     </head>  
     <body>
     		<ul id="five">
        		<li>s</li>
       		 	<li>s</li>
    		</ul>
    		<ul id="six">
        		<li>s
            		<ul>
                		<li>1</li>
                		<li>1</li>
            		</ul>
        		</li>
        		<li>s</li>
        		<b>2</b>
        		<b>3</b>
    		</ul>
     </body>

伪类选择器

伪类选择器,这四种的顺序不可以改变，多用于链接标签中

	<head>
		<style>
			/* 伪类选择器,这四种的顺序不可以改变，*/
        	/* 默认状态 */
        	a:link{background-color: #48daa7;}
        	/* 访问过后的状态 */
        	a:visited{background-color: yellow;}
        	/* 鼠标悬浮 */
        	a:hover{background-color: red;}
        	/* 鼠标按下 */
        	a:active{background-color: blue;}
        </style>
     </head>  
     <body>
     		<a href="demo01.html" target="_blank">这是一个链接</a>
     </body>

结构伪类

	<head>
		<style>
			/* 结构伪类 */
        	em:nth-child(11){background-color: blueviolet;}
        </style>
     </head>  
     <body>
     		<em>一整个大大的倾斜</em>
     </body>

颜色

color文本颜色，background-color背景色

六种用法
- 英文字母：red
- 十六进制颜色表如下图
- rgb：rgb(0-255，0-255，0-255)红绿蓝三色
- rgba：rgba(0-255，0-255，0-255，0-1)多了个透明度
- hsl：h色相(0/360红色，120绿色，240蓝色，0~360)，s饱和度%，l亮度%
- hsla：在hsl的基础上多了透明度；hsla(0-360, 0-100%, 0-100%, 0-1)