CSS

最新推荐文章于 2023-09-19 13:58:50 发布

转载最新推荐文章于 2023-09-19 13:58:50 发布 · 220 阅读

Python 专栏收录该内容

63 篇文章

订阅专栏

本文主要介绍了CSS（层叠样式表）的相关知识。阐述了CSS的作用、对HTML的依赖、文件后缀、基本语法、存在形式及作用域。还介绍了标签、id、类等多种选择器，以及边框、背景、字体等属性，帮助读者了解CSS在网页样式设计中的应用。

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

CSS

层叠样式表 (英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

一、CSS作用

通过css控制标签的样式, 起到美化网页的效果, 没有css, 那么网页简直不堪入目....

二、依赖HTML

是以HTML为基础的, HTML可以单独放在页面, 但是css是要在HTML的基础上才可以生效

三、文件后缀

.css

四、基本语法

标签选择器 { 属性:值; 属性:值; 属性:值;.....}

五、存在形式

外联式

当样式需要被应用到很多页面的时候，将会使用外联样式
需要在标签中引入一个标签

<link>是标签的一种， 用于定义文档与外部资源的关系。
<link> 标签没有结束标签,属于单标签。
<link>标签位置一般写在<head>标签之内，用来链接外部的文件

<link rel="stylesheet" type="text/css" href="css文件的路径">
外联式直接在css文件里面定义样式  div{width:200px;}

嵌入式：

当单个文件需要特别样式时，就可以使用嵌套样式。
通过在部分定义

内联式

当特殊的样式需要应用到个别元素时，就可以使用内联样式
使用内联样式的方法是在标签中使用样式属性，样式属性可以是任何 CSS 属性

其作用范围是在当前标签内，使用较少

<div style="width:100px; height:100px; color:red; font-size:20px"></div>

六、作用域

(内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

离标签越近的作用越大

选择器

选择某一个标签的过程

标签选择器

选中页面所有对应的标签, 应用样式, 此种选择器影响范围大

div {color:red;}   

<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

id选择器

通过id名来选择元素

#box{color:red} 
<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

类选择器

用于标记一类标签, 页面不唯一, 可以用于代表一类标签应用相同样式

类名自定义

.lei {color:red;}
<div class="lei"></div>

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器

层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突

.box span{color:red}
.box .red{color:pink}
.red{color:red}
div .red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。也成为并列选择
举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

<!DOCTYPE html>
<html>
	<head>
		<title>hellow world</title>
	</head>
	<body>
	    <h1>hellow world</h1>
		<div>
			<span>这里是普通行内块级元素</span>
		</div>
		<div>
			<b>这里是加粗</b>
		</div>
		<br>
		<div>这里是普通段落</div>
		<p>这里是普通段落</p>
		<p>这里是普通段落</p>
		<p>这里是普通段落</p>
	</body>
</html>

七、属性

border:边框

    边框样式的参数：
solid;/*边框为实线实线边框（常用）*/
none; /*无边框*/
dotted; /*边框为点线*/
dashed;/*边框为长短线*/
double;/*边框为双线*/
groove ;/*根据border-color的值画3D凹槽*/
ridge;/*根据border-color的值画菱形边框*/
inset; /*根据border-color的值画3D凹边*/
outset ;/*根据border-color的值画3D凸边*/

border四个边框
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框
在开发中我们一般这样写CSS 边框，优化简写，常见对对象设置使用属性代码：border:1px solid #blue;。

背景属性： (background)

    background /*颜色*/
background-image: url();/*背景图片*/
background-repeat: no-repeat;/*不重复平铺背景图片*/
repeat-x;/*使图片只在水平方向上平铺*/
repeat-y;/*使图片只在垂直方向上平铺*/
background-attachment: 参数

参数取值范围：
 background-attachment: fixed;(固定)

scroll;(滚动)
background-position: left;(水平)
top(垂直);位置 
fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动
scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动

鼠标

    cursor：鼠标形状参
CSS鼠标形状参数表：
cursor:crosshair十字形
cursor:text" 文本形
cursor:wait沙漏形
cursor:move"十字箭头形：
cursor:help问号形
cursor:e-resize右箭头形
cursor:n-resize上箭头形
cursor:nw-resize左上箭头形
cursor:w-resize左箭头形
cursor:s-resize下箭头形
cursor:se-resize右下箭头形
cursor:sw-resize"左下箭头形

margin延伸

（单独设置四边间距属性单词）简写写法：margin：
 
上 右 下 左 （四个值）
 
margin-left 对象左边外延边距 margin-left:80px; 左边外延距离80
margin-right 对象右边外延边距 margin-right:80px; 右边外延距离80
margin-top 对象上边外延边距 margin-top:80px; 上边外延距离80px
margin-bottom 对象下边外延边距 margin-bottom:80px; 下边外延距离80px

padding内补白

(内边距)left right top bottom

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白*/

字体属性

      1.color：加上颜色
2.font-size:20px;/*每个浏览器默认的字体不一样的 谷歌的默认字体大小是16或者18*/
2.font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
3.line-height: normal;(正常) 
4.line-height：50px;/*div的高度也是五十，这样你的内容结束平行居中*/
5.font-weight: bold;(粗体) , lighter;(细体) normal;(正常)，设置数字也是可以的 (100px,200px)
6.font-variant: small-caps;(小型大写字母) normal;(正常)
7.text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
8.text-shadow：none：无阴影<length>①：
第1个长度值用来设置对象的阴影水平偏移值。可以为负值<length>②：
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值<length>
③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值<color>：设置对象的阴影的颜色。
举例：p{text-shadow:3px 10px rgba(0,0,0,.3);}

ul里面的属性：

默认是实心圆，下面的就可以更改。

list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position:inside; /*缩进*/

随便举例几种字体：

    font-family:"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
font-family: "Times New Roman", Times, serif; font-size: 14px;
font-family:Arial,Helvetica,sans-serif;font-size:100%;
font-family:"微软雅黑","黑体","宋体";
font-family:arial, sans-serif; font-size:12px;

区块

单词间距

    1.word-spacing: 
    间隔距离
    2.字母间距
    letter-spacing: 
    字母间距
    3.文本对齐
    text-align: 
    参数的取值：
    left：左对齐
    right：右对齐
    center：居中对齐
    justify：相对左右对齐
    4、垂直对齐
    vertical-align: 
    参数
    top：顶对齐
    bottom：底对齐
    text-top：相对文本顶对齐
    text-bottom：相对文本底对齐
     baseline：基准线对齐
    middle：中心对齐
     sub：以下标的形式显示
    super：以上标的形式显示
    5、文本缩进
    text-indent: 缩进距离