Web前端之css

最新推荐文章于 2024-09-29 19:16:56 发布

Eternity_y

最新推荐文章于 2024-09-29 19:16:56 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/Eternity_y/article/details/82495622

web前端专栏收录该内容

11 篇文章

订阅专栏

本文深入解析CSS（层叠样式表）的运用，包括行内样式、内部样式表及外部样式表的设置方法，详细讲解display、color、background-color等属性，以及div容器的使用。同时，介绍了选择器的种类及其优先级，如元素选择器、class选择器、id选择器等，并解释了重用样式的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#css (层叠样式表）
###行内样式：
<标签 style="多个样式"></标签>
display:设置组件是块还是行内或者行内块

block:块
inline:行内元素
inline-block:行内块元素

color:颜色
background-color:背景色
font-size:字体大小
font-family:字体名称
font-style:italic 斜体
font-weight:bold 粗体
text-align:center居中
background-image: url(背景图片路径)
background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复)
background-size: 110px 缩放背景图大小
border 边框颜色线条样式线条宽度;

border-color: 边框颜色
border-style: 线条样式( solid 实心线)
border-width: 线条宽度
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框

#####div容器标签：

<div>
	<p>
	<table>
	...
</div>

###内部样式表

<html>
	<head>
		<style>样式定义</style>
	</head>
</html>

###外部样式表
将样式信息单独定义在*.css文件中，然后使用如下：

<html>
	<head>
		<link rel="stylesheet" href="css文件路径">
	</head>
</html>

###内间距:
padding：top上 right右 botton下 left左
###外间距：
margin : top上 right右 botton下 left左
###盒子模型
外间距—》边框—》内间距—》内容
###z-index
position:absolute（绝对定位）; left:x坐标（向右）; top:y坐标(向下)
###重用样式：

<html>
	<head>
		<style>样式表</style>
	</head>
</html>

#选择器{样式}
1.元素：使用标签<div>、<p>匹配
2.class：根据class属性值匹配

<p class="值">
.值{样式}

3.id:根据id属性值匹配----id取值唯一

<p id="值">
#值{样式}

4.父子选择器：父选择器>子选择器
5.后代选择器：祖先选择器后代选择器
6.伪类选择器

:hover  当鼠标悬浮在标签之上，算匹配 
:nth-child 当作为第n个孩子元素, n从1开始
:last-child 当作为最后一个孩子元素

###选择器的优先级
！important > style > #id > .class > 元素
注：！important 提升样式优先级

子标签可以继承父标签样式，也可以覆盖父标签同名样式