CSS-常用知识点

最新推荐文章于 2023-08-25 17:33:16 发布

NONAME999

最新推荐文章于 2023-08-25 17:33:16 发布

阅读量283

点赞数

分类专栏：前端基础文章标签： CSS

本文链接：https://blog.csdn.net/NONAME999/article/details/85328800

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS常用知识点

css简介

1、CSS: cascading style sheet 层叠样式表。

2、CSS的作用：设置网页的显示效果

3、将网页显示的效果和内容分离（降低耦合性，提高代码的复用率）

4、html只需要将文本内容封装，不用属性，用css代码来控制html的显示效果

css和html结合

css和html的结合方式有4种

1、在html的标签上，提供一个属性：style = "css的代码"
2、在html的文件，提供一个（标签）<style type="text/css">css代码</ style> 这个标签放在<head></head>中间
3、引入外部文件（定义一个css文件）（经常使用的方式）
			@import url("CSS文件的地址");必须写在<style></style>的
			css样式的嵌套 可以在css文件中使用该代码再次引入css文件
4、引入外部文件，通过一个<link>标签
			写在<head></head>中间，不要放在<style></style>中间
			<link>标签的属性格式
			<linke rel="stylesheet" style="text/css" herf="XXX.css">
			rel表示当前文件和引入文件的关系  stylesheet表示样式表
			href表示引入css文件的地址

css样式的优先级和代码规范

样式优先级

由上到下，由内到外。优先级由低到高

规范

css的写法： div{css的属性名：值；css的属性名：值；。。。}

属性和属性之间用分号隔开

属性与属性值之间用冒号连接

如果一个属性有多个有多个值多个值之间用空格隔开。

css的选择器

告诉css的代码作用在哪个标签上

基本选择器

标签名选择器  div{}  span{}  body{} input{}
--------------------------------------------------------------------------------------
类选择器：
	在html的标签上，提供了属性class，定位到div的标签
写法：
	.class的名称 （.hehe{ color = "red"}）
调用：
	<div class="hehe"></div>
可以让不同的标签，拥有相同的样式
--------------------------------------------------------------------------------------
Id选择器：
	提供属性，设置样式
	写法：
		#id名称（#hehe{ color = "red"}）
	调用：
		<div id = "hehe"><div>
	用法和类选择器相同，给不同的标签，设置相同的样式，一般情况下给js语言来使用
	优先级：（特殊情况下）
	标签选择器<类选择器<ID选择器<style属性

扩展选择器

关联选择器
	标签是可以嵌套的，两个或多个选择器之间产生的关系，就可以使用这种选择器
	例子：

在这里插入图片描述

组合选择器
	对多个不同选择器进行相同样式设置的时候用此选择器
	写法：
		多个选择器之间用逗号隔开
	例子：

在这里插入图片描述
伪类选择器
其实就是字html中预先定义好的一些选择器。或者说当前元素处于的状态

	使用超链接应用伪元素选择器