CSS总结

卡拉今天刷题了吗

已于 2023-11-10 20:50:53 修改

阅读量85

点赞数

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

于 2023-11-10 20:47:10 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61123085/article/details/133977344

版权

前端专栏收录该内容

3 篇文章

订阅专栏

CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS基本用法

CSS语法

<head>
	<style>
		选择器{
			属性名：属性值；
			属性名：属性值；}
	 </style>
</head>

选择器：要修饰的对象
属性名: 要修饰对象的某个属性
属性值：设置属性的参数

CSS基本引用

插入样式表有三种：外部样式表、内部样式表、内联样式表

外部样式表：当样式需要应用到很多文件时，通过一个文件改变一个网站的外观。

<head>
	<link rel="stylesheet" type="text/css" herf="mystyle.css">
	</head>

内部样式表：当单个文档需要特殊样式，就可以使用内部样式表

<head>
	<style>
	p  {
	color:pink;
	}
   </style>
 </head>

内联样式表：当样式仅只需要在一个元素使用一次时，使用内联样式表

<p style="color:red; margin-left:20px;"> hahahah </p>

多重样式优先级

内联样式 > 内部样式 > 外部样式

CSS选择器

基础选择器

1.标签选择器：以html标签为名称作为选择器名称,书写格式为标签后空格再写样式

p {color:red;}

2.类选择器：可以在多个元素中使用，可以描述一组样式，类选择以一个.显示

.center{text-align:cneter;}

3.id选择器可以为表有特定id的html元素指定的样式。以“#”表示

#nav
{
		color:red;
		text-align:center;
}

复杂选择器

1.后代选择器：以空格隔开，用于选取某元素的后代元素
ps：选取所有<p>元素到<div>元素中

div p{ background-color:pink;}

2.子元素选择器：只能作为某元素一级子元素的元素，用>隔开
ps：选择所有<div>的直接子元素<p>

div>p{ background-color:red;}

3.相邻兄弟选择器：可选择警戒值在另一元素后的元素，且二者具有相同的父元素，用+隔开
ps:选择了<div>元素之后的第一个<p>元素

div+p{ backgrooudn-color:black;}

4.后续兄弟选择器：选取所有指定元素之后的相邻元素之后的兄弟元素,用~隔开
ps：选取<div>之后相邻的兄弟元素<p>

  div~p{ backgrooudn-color:black;}

伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

伪元素选择器

CSS 伪元素是用来添加一些选择器的特殊效果。

选择器	示例	示例说明
:link	a:link	选择所有未访问过的链接
:visted	a:visted	选择所有访问过的链接
:active	a:active	选择正在活动的链接
:hover	a:hover	把鼠标放在连接上的状态
:first-letter	p:firdt-letter	选择p元素的第一个字母
:first-line	p:first-line	选择每个p元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的p元素
:before	p:before	在每个p元素前插入内容
:after	p:after	在每个p元素后插入内容
:lang(language)	p:lang(it)	为p元素的lang属性选择一个开始值

选择器优先级

1.优先级

行内样式>ID选择器>类选择器>标签选择器

2.内外部样式加载顺

就近原则原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先

3!important

可以使用!important使某个样式有最高的优先级

CSS基本属性

背景属性

属性	说明
background-color	背景颜色
background-image	背景图像
background-repeat	背景图片的重复方式
background-position	背景图片的显示位置
background-attachment	背景图片是否跟随滚动
background	简写

1.background-color

取值transparent为透明

2.background-image

必须使用url()方式指定图片的路径
如果实在css样式文件中使用相对路径，此时是相对css文件，不是相对html文件

3.background-repeat

取值：repeat（默认），repeat-x，repeat-y，no-repeat

4.background-position

默认背景显示在左上角
取值关键字：top、botton、left、right、center
坐标：左上角为（0，0）坐标，向右为x正方向，向下为y正方向

5.background-attachment

取值：scoll（默认）、fixed（固定不动）

列表属性

属性	含义	说明
list-style-type	设置列表前的标记
list-style-image	将图像作为列表前的标记
list-style-position	设置标记位置	取值：outside（默认）inside
list-style	简写

list-style-type

取值：none 、disc、circle、square、decimal
list-style-
简写属性：lost-style:lilst-style-type list-style-image list-style-position

表格属性

属性	含义	说明
border	设置边框粗细
border-collapse	设置表格的边框是否被折叠成一个单一的边框或隔开	取值：collapse（折叠）separated（默认）
text-align	设置文本对齐方式	取值：left right center
vertical-align	垂直对齐	取值：top、center、bottom
padding	边框和表格内容之间的间距	像素为单位

文本属性

属性	含义	说明
color	颜色
line-height	行高	行之间的高度
text-align	设置水平对齐方式	取值：left right center
vertical-align	垂直对齐	取值：top、center、bottom
text-indent	首行缩进
text-decoration	文本修饰	取值：underline、overline、line-through
text-transform	字母大小写转换
letter-spacing	字符间距
word-spacing	单词间距	只对英文有效
white-spacing	空白的处理方式	文本超出后是否换行，取值：nowrap

颜色属性

四种写法
1.颜色名称：使用英文单词
2.16进制的RGB值：#RGGBB
3.特定情况可以缩写

#FFFFFF—>#FFF 白色
#000000—>#000 黑色
#FF0000—>#F00 红色
#00FF00—>#0F0 绿色
#0000FF—>#00F 蓝色
#CCCCCC—>#CCC 灰色
#FF7300—>无法简写

4.rgba:rgba(red,green,blue,alpha)

可以设置透明度，alpha取值范围【0，1】

CSS定位方式

通过position属性实现对元素的定位，有四种方式

属性	含义	说明
static	默认值
relative	相对定位	相对于标签原来的位置进行的定位
absolute	设置文本对齐方式	取值：left right center
vertical-align	垂直对齐	取值：top、center、bottom
padding	边框和表格内容之间的间距	像素为单位