前端css基础

最新推荐文章于 2024-09-08 10:28:36 发布

Luck-kun

最新推荐文章于 2024-09-08 10:28:36 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/joys_wkx/article/details/102508023

版权

Css Base

css（Cascading Style Sheets）层叠样式表、级联样式表也称样式表。
定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

css基础语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

span{
		font-weight: bold;
		color: black;
	}

注：

span-----选择器
font-weight:bold;/color: black;-----声明
font-weight:/color----属性
bold;/black;------属性值

css的使用

内联样式：在标签的style属性中声明样式不推荐使用

<p style="color: blue;background-color: #999;"></p>

2.内部样式
a、适用于小型案列，只与HTML在同一个页面显示
b、嵌入式是将CSS样式集中写在网页的(<head></head>)标签对的<style></style>标签对中

<style type="text/css">
div{
	color: green;
	background-color: red;
}
</style>

外部样式
a、单独创建一个.css
b、需要在HTML中用<link>引入

<link rel="stylesheet" type="text/css" href="css/xxx.css"/>

css选择器

通用选择器
匹配页面中所有的元素

*{
	font-size: 12px;
	}

元素选择器
a、引用的页面中，所有的指定标签设定统一样式
b、同一个页面相同的标签有相同的样式

a{
	text-decoration: none;
}

ID选择器
标签的唯一标识独一无二的样式设计

#top{
	width: 40%;
	height: auto;
	border: 0px solid red;
	text-align: center;
	position: absolute;
	top: 10%;
	left: 30%;
}

类选择器
a、不同的标签均可以设定相同的class属性值
b、不同的标签有相同的样式设计

.f{
	width: 100%;
	height: 60px;
	line-height: 60px;
	font-size: 25px;
}

后代选择器
具备层级关系的元素，被嵌套的都可以被称为后代元素

.nav li{
		list-style: none;
     }

并选择器
中间要用逗号隔开

p,a{
	text-decoration: none;
	color: #00AEFF;
}

子选择器

div>p{/*直接子元素，div标签下的直接子元素p*/
   color:green
}
div+p{/*元素后的第一个兄弟节点，div标签后面的紧跟着的第一个兄弟节点且是p标签，该p标签被选中*/
color: #00AEFF;
}
div~p{/* 元素后的兄弟节点，*/
font-size: 25px;
}

属性选择器

[href]{/*用于选取带有指定属性的元素。*/
		text-decoration: none;
	}
a[title='ok']{
		font-size: 24px;
	}
	/*以上均是属性选择器*/

伪类选择器

a:link {/* 未访问的链接 */
  color: #FF0000
}
a:visited {/* 已访问的链接 */
  color: #00FF00
} 
a:hover {/* 鼠标移动到链接上 */
  color: #FF00FF
} 
a:active {/* 选定的链接 */ 
  color: #0000FF
}

css样式表的特征

继承性
子元素可以直接使用父元素，声明的样式，可以被继承
层叠性
一个元素可以声明多个元素的规则
优先级
定义样式有冲突的情况下，按照优先级来解析
高：内联样式
中：外部样式内部样式（就近原则 — 后来者居上）
底：浏览器缺省样式 (UA StyleSheet)

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。