CSS学习归纳总计(一)

最新推荐文章于 2024-05-14 18:04:32 发布

郝彦如

最新推荐文章于 2024-05-14 18:04:32 发布

阅读量186

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Hao_Yanru/article/details/104931049

版权

文章目录

CSS概述

CSS，（Cascading Style Sheets，层叠样式表）用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

CSS创建方式

行内样式表——元素内嵌样式
- 将网页链接到外部样式表
- ```
<p style="color: red;font-size: 30px;">p标签的样式</p>
```

内部样式表——文档内嵌样式

在网页上创建嵌入的样式表

<head>
    <style type="text/css">
    p{
		color: red;
		font-size: 30px;
	}
    </style>
</head>
<body>
	<p>这是一个文档内嵌样式(内部样式)</p>
</body>

外部样式表——外部引入样式

将网页链接到外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </style>
<!--解析：href表示.css文件表示路径；type表示文件的类型是样式表文件；rel是指在页面中使用外部的样式表-->
</head>
<body>
	<p>这是一个外部引用样式</p>
</body>

@charset "utf-8";
    p{
	color: green;
	font-size: 30px;
}

CSS样式表层叠和继承

样式表层叠
- 指的是同一个元素通过不同方式设置样式表产生的样式重叠
样式表继承
- 指的是某一个被嵌套的元素得到它父元素样式

浏览器样式

是这个元素在这个浏览器运行时默认时附加的样式

<b>这个元素隐含加粗样式</b>
<span style="font-weight:bold;">这个元素通过style加粗</span>

CSS中的选择器

基本选择器

通用选择器

<head>
	*{
		border: 1px solid green;
	} 
<!--解析："*"号是通用选择器，功能匹配所有元素，包括`<html>`和`<body>`标签-->
</head>
<body>
	<p>段落样式</p>
	<b>加粗样式</b>
	<span>快标签</span></body>

元素选择器

<head>
	p{
		color:green;
	}
<!-- 解析：直接使用元素名称作为选择器即可 -->
</head>
<body>
	<p>这是一个段落</p>
</body>

ID选择器

<head>
    #abc{
		color: yellow;
		font-size: 30px;
	}
<!--解析：通过对元素设置全局属性id，然后使用#id值来选择页面唯一元素-->
    .ls{
    	color:green;
    }
    .mn{
    	font-size:30px
    }
<!--解析：可以引用多个类-->
</head>
<body>
    <p id="abc">这是第一个段落</p>
    <span class="ls mn">这是第二个段落</span>
</body>

类选择器

<head>
	.abc{
    	border:1px solid red;
    }
<!-- 解析：通过对元素设置全局属性class，然后使用.class值选择一个或多元素 --> 
    b.abc{
		border:1px solid blue;
	}
<!--解析：也可以使用"元素.class值"d的形式，限定某种类型的元素 -->
</head>
<body>
    <b class="abc">加粗效果</b>
    <span class="abc">啥也没有</span>
    <span class="abc edf">无</span>
<!--解析：类选择器还可以调用多个样式，中间用空格隔开进行层叠-->
</body>

复合选择器

分组选择器

<head>
    p,b,i,span{
    	color:blue;
    }
<!--解析：将多个选择器通过逗号分隔，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用ID选择器、类选择器、属性选择器混合使用-->
</head>
<body>
    <p>段落</p>
	<b class="abc">加粗效果</b>
	<i>倾斜</i>
	<span class="abc">啥也没有</span>
</body>

后代选择器

<head>
      p b{
      	color:red;
      }
  <!--解析：选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可以使用ID选择器、类选择器、属性选择器混合使用-->
</head>
<body>
      <p id="pid">第二个p标签
      	<span>第一层span标签
      		<span>第二层span标签
          		<span>第三层span标签</span><br/>
          	</span><br/>
          	<b>这是一个b标签</b>
          	<p>这是一个p标签</p>
      	</span>
  	</p>
  </body>

子选择器

<head>
    ul>li{
    	color:yellow;
    }
</head>
<body>
    <ul>
		<li>我是儿子
			<ul>
				<li>我是孙子</li>
				<li>我是孙子</li>
			</ul>
		</li>
		<li>我是儿子</li>
		<li>我是儿子</li>
	</ul>
<!-- 子选择器 -->
<!-- 子选择器与后代选择器最大的不同就是子选择器只能选择父元素向下一级的元素，不可以再往下选择 -->
</body>

相邻兄弟选择器

<head>
    p + b{
    	color:khaki;
    }
<!-- 相邻兄弟选择器匹配和第一个元素相邻的第二个元素 -->
</head>
<body>
    <p>第一个p</p>
	<b>第一个b</b>
	<b>第二个b</b>
	<b>第三个b</b>
</body>

普通兄弟选择器

<head>
    p ~ b{
    	color:green;
    }
<!-- 普通兄弟选择器匹配和第一个元素后面的所有元素 -->
</head>
<body>
    <p>第一个p</p>
	<b>第一个b</b>
	<b>第二个b</b>
	<b>第三个b</b>
</body>

伪选择器分为【伪元素选择器】和【伪类选择器】，伪元素前置为两个冒号(:😃 伪类前置为一个冒号(😃

伪元素选择器

块级首行

<!--style.css-->
::first-line{
	color:yellow;
}  /* 解析：块级元素的首行文本被选定，若想限定某种元素，可以加上前置 h4::first-line */

<!--index.html-->
<body>
	<h4>1111111111<br/>
		2222222222<br/>
		3333333333</h4>
</body>

块级首字母

::first-letter{
    color:red;
}  /* 块级元素的首行首字母 */

文本插入

/* 在文本前插入内容 */
a::before{
    content:"点击-"
}

/* 在文本后插入内容 */
a::after{
    content:"-请进"
}

伪类选择器

结构性伪类选择器

结构性伪类选择器：能够根据元素在文档中的位置选择元素，这类元素都有一个前缀（:）

子元素选择器

<!--style.css-->
ul > li:first-child{
    color:red;
}
/* 选择第一个元素 */

ul > li:last-child{
    color:green;
}
/* 选择最后一个元素 */

p > span:only-child{
    color:yellow;
}
/* 匹配属于父子元素中唯一子元素的元素，即span标签是p标签的唯一子元素 */

:nth-chile(n)系列

ul >li:nth-child(2){
    background:yellow;
}
/* 解析：选择子元素的第二个元素 */
ul >li:nth-last-child(2){
    background:orange;
}
/* 解析：选择子元素的倒数第二个元素 */

UI伪类选择器

UI伪类选择器是根据元素的状态匹配元素

:enabled{
    border:1px solid red;
}
/* enabled解析：选择启用状态的元素 */

input:disabled{
	border:1px solid purple;
}
/* disabled解析：选择禁用状态的元素 */

input:checked{
	display:none;
} 
/* checked解析：选择勾选的input元素 */

input:required{
	border:2px solid purple;
}
input:optional{
	border:2px solid green;
}
/* 解析：根据是否具有required属性选择元素 */

动态伪类选择器

动态伪类选择器根据条件的改变匹配元素

a:link{
	color:red;
}  
a:visited{
	color:green;
}   
/* 解析：link表示未访问过的超链接  visited表示已访问过的超链接 */
a:hover{
	color:purple;
} 
/* 解析：hover表示鼠标悬停在超链接上的时候 */
a:active{
	color:blue;
}   
/* 解析：表示鼠标按下激活超链接的时候，css中active必须位于hover之后 */

input:focus{
    border:3px solid orange;
}
/* 表示获得焦点时 */

CSS中的颜色及度量单位

颜色表方案

颜色表及html代码: http://xh.5156edu.com/page/z1015m9220j18754.html
css颜色表: https://www.w3school.com.cn/tags/html_ref_colornames.asp
Web安全色: https://www.bootcss.com/p/websafecolors/

颜色名称
十六进制代码
- eg: #ff0000 //表示红色

十进制代码

函数	说明	示例
rgb(r,g,b)	用RGB模型表示颜色	rgb(0,128,128)
rgba(r,g,b,a)	同上，a表示透明度0-1之间	rgba(0,128,128,0.5)
hsl(h,s,l)	用HSL模型（色相饱和度透明度）	hsl(120,100%,30%)
hsla(h,s,l,a)	同上，a表示透明度0-1之间	hsla(120,100%,30%,0.5)

度量单位

px em %

p{
	margin:20px;
	background:sliver;
	font-size:20px;
    height:2em;
    weidth:50%;
}
/* 解析：虽然px也是相对单位，但由于和分辨率挂钩，导致他其实就变成了一个绝对单位了，灵活性没有em高，使用比较容易 */
/* 解析：em是相对单位，与字号大小挂钩，会根据大小改变自己的大小，灵活性很高 */
/* 解析：长度比较好理解，就是挂钩它所在区域的宽度，而font-size则是继承到的原始大小的百分比 */

CSS中块级元素与行内元素

块级元素
- 块级元素特点
  - 每个块级元素都是独占一行，float浮动除外
  - 元素的高度、宽度、行高和边距都是可以设置的，可容纳行内元素
  - 元素的宽度如果不设置的话，默认为父元素的宽度(父元素宽度100%)
- 常用的块级元素
  - h1～h6 div p hr ul ol dl li dt dd table td tr th header nav footer section article
行内元素
- 行内元素特点
  - 行内元素一般不可以包括块级元素
  - 每一个行内元素可以和别的行内严肃共享一行，相邻的行内元素会排列在同一行里，知道一行排不下了，才会换行
  - 不可设置行内元素的高度、宽度、行高及顶部和底部边距
  - 元素的宽度就是它包含的文字或图片的宽度，不可改变
- 常用的行内元素
  - a img span input lable select textarea b strong

郝彦如

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习归纳总计(一)

文章目录CSS概述CSS创建方式行内样式表内部样式表——文档内嵌样式外部样式表——外部引用样式CSS样式表层叠和继承样式表层叠样式表继承浏览器样式CSS中的选择器基本选择器通用选择器元素选择器ID选择器类选择器复合选择器分组选择器子选择器CSS概述CSS，（Cascading Style Sheets，层叠样式表）用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言CSS创建方...
复制链接

扫一扫