CSS-1 - -seventy- - 博客园

认识 CSS

层叠样式表

引入方式

方式一

CSS代码，直接写在 HTML 的 style 标签里

 <style>
    p {
        color:red; /* 颜色大小控制 */
        font-size:30px; /* 字号大小 */
    }
</style>

方式二

在 HTML 使用 link 标签引入

 <link rel="stylesheet" href="./test.css">
 
rel 属性（了解）
    1. rel 属性规定当前文档与被链接文档之间的关系
    2. 只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持

方式三

CSS代码，直接写在标签的 style 属性值里（不推荐）

 <div style="color:red; font-size:20px;"> 这是div标签 </div>
 
行内样式，配合 JavaScript 使用

CSS 注释

 /* 这是注释，CSS代码 */

CSS 特性

继承性、层叠性、优先级

作用：简化代码 ( 定位问题 )，并解决问题

 1.继承性：
子级默认继承父级的文章控制属性，当然，如果子级自己有则生效自己的样式，不继承。

 2.层叠性：
相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效

 3.优先级：
优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
规则内容：选择器优先级高的样式生效
公式详情：
/*
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important 
*/
即：选中标签的范围越大，优先级越低
!important 提权功能，提高权重/优先级提到最高，慎用！！
 
举例：
<style>
    .box {
        color:blue !important;
    }
</style>

选择器

作用：查找标签，从而能够设置样式

基础选择器

1.标签选择器

 <style>
    p {
        color:red;
    }
</style>
 
使用"标签名"(如：p、div、h1...)作为选择器->选中"同名标签"设置"相同的样式"

2.类选择器

 <style>
    .to-red {
        color:red;
    }
    .TO-big {
        font-size:20px;
    }
</style>
 
<body>
    <p class="to-red">111111</p>
    <p>222222</p>
    <p class="to-red TO-big">333333</p>
</body>
 
查找标签，差异化设置标签的显示效果（一个标签可以使用多个类名，当 class 属性值要写多个类名时，类名与类名之间用空格隔开）

3.id选择器

 <style>
    #d1 {
        color:red;
    }
</style>
<body>
    <div id="d1">111111</div>
    <div>222222</p>
    <div>333333</div>
</body>
 
id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式（注意，同一个id 选择器在一个页面只能使用一次）

4.通配符选择器

 <style>
    * {
        color:red;
    }
</style>
 
不需要调用，浏览器自动查找页面所有标签，设置相同的样式

复合选择器

 定义：由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、高效的选择目标元素（标签）
类型：
	1.后代选择器
	2.子代选择器
	3.并集选择器
	4.交集选择器

1.后代选择器

 作用：
	选中某元素的后代元素（包括儿子、孙子、重孙子...）
写法：
    父选择器 子选择器 {
        css属性:值;
    }

2.子代选择器

 作用：
	选中某元素的子代元素（最近的子级）
写法：
    父选择器 > 子选择器 {
        css 属性:值;
    }

3.并集选择器

 作用：
	选中多组标签设置相同的样式
写法：
    选择器1, 选择器2, 选择器3 {
        css属性:值;
    }

4.交集选择器

 作用：
	选中同时满足多个条件的元素（了解）
    注意：标签选择器必须书写在最前面
写法：
    <style>
        /* 既是P标签，又是box类 */`
        p.box {
            color:red;
        }
    </style>
    <body>
        <p class="box">p标签，使用了类选择器</p>
        <p>p标签</p>
        <div class="box">div标签，使用了类选择器</div>
    </body>

伪类选择器

伪类表示 "元素状态"，选中元素的某个状态，设置样式！

 鼠标悬停状态：
 
选择器:hover {
	CSS属性:属性值;
}
 
<style>
    /* 任何标签都可以设置鼠标悬停的状态 */
    a:hover {
        color: red;
        text-decoration: none;
    }
    .box:hover {
        color:blue;
    }
</style>
 
<body>
    <a href="#">a标签</a>
    <div class="box">div标签</div>
</body>

 伪类---超链接
 
超链接共有四个状态，分别是：
 
:link		访问前
:visited	访问后
:hover		鼠标悬停
:active		点击时（激活）
 
提示：如果要给超链接设置以上四个状态，需要按LVHA的顺序书写

文字属性

字体粗细

 font-weight:400
 
正常：400，加粗：700

字体倾斜

 font-style
 
不倾斜：normal，倾斜：italic

行高

 line-height:20px;
 
直接写数字的话，将作为当前标签 font-size 属性值的倍数

字体族

 font-family:Microsoft YaHei, Heiti SC;
 
从左往右，有这个字体就执行这个字体，没有就向右继续执行备胎字体，建议在工作中使用无衬线字体进行兜底 sans-serif

字体复合属性

 font:italic 700 30px/2 楷体;
 
文字倾斜、文字加粗、字体大小30px、行高2倍、楷体
(注意：字号和字体必须书写，否则不生效)

文本属性

文本缩进

 text-indent:2em;
 
推荐使用em ，若当前标签的字号的大小为16px,则1em=16px，2em=32px。
当然也可以使用"数字+px"，但是不推荐。
首行缩进两个字实例：text-indent:2em;

文本对齐

 text-align:center;
 
文本对齐方式: left、center、right
居中的本质是文字居中，而不是标签居中

 扩展：图片居中
 
<style>
    div {
        text-align:center;
    }
</style>
 
<div>
    <img src="./images/pic.jpg" alt="这是一张猫的图片">
</div>

修饰线

 text-decoration:none;
 
none		   清除所有效果
underline	      下划线
line-through 	   删除线
overline	   	   上划线

 例子: 清除"a标签"的下划线
 
<style>
    a {
        text-decoration:none;
    }
</style>
 
<a>点击前往</a>

颜色

 color: red;
 
rgb 表示法（了解）
    1. rgb(r,g,b)
    2. 三元色取值（0-255）
 
rgba 表示法（开发使用）
    1. rgba(r,g,b,a)
    2. a 表示透明度，其取值为(0-1)
 
十六进制表示法（开发使用）
	1. #000000、#ffcc00...
	2. 简写形式：#000、#fc0...

背景属性

属性大全

 背景色				 background-color
背景图				 background-image
背景图平铺方式		   background-repeat
背景图位置			background-position
背景图缩写			background-size
背景图固定			background-attachment
背景复合属性		    background

背景图

引用背景图

 <style>
    div {
        width: 400px;
        height: 400px;
        /* 背景图默认是平铺（复制）的效果 */
        background-image: url();
    }
</style>
 
<body>
    <div>div标签</div>
</body>

平铺方式

 属性名: background-repeat（bgr）
 
属性值:
    no-repeat	不平铺
    repeat		平铺
    repeat-x	水平方式平铺
    repeat-y	垂直方式平铺
 
代码演示：
<style>
    div {
        width: 400px;
        height: 400px;
        background-image: url();
        background-repeat: no-repeat;
    }
</style>
 
<body>
    <div>div标签</div>
</body>

背景图位置

 属性名：background-position
 
属性值：水平方向位置，垂直方向位置，具体如下：
1.属性值方式一：关键字
    left	 左
    right	 右
    center	 居中
    top		 顶部
    bottom	 底部
2.属性值方式二：坐标（数字+px，正负都可以）
3.属性值方式三：上面两者混用
 
代码演示：
<style>
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/1.png);
        background-repeat: no-repeat;
        
        background-position:center bottom; 
        background-position:50px -100px;
        bakcground-position:50px center;
    }
</style>
 
<body>
    <div>div标签</div>
</body>

背景图缩放

 属性名：background-size
 
属性值：
cover：等比例缩放背景图片以完全覆盖区域，可能背景图片部分看不见
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小
数字 + 单位（例如：px）
 
代码演示：
<style>
    div {
        width: 600px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/1.png);
        background-repeat: no-repeat;
        
        background-size:100%;
        background-size:cover;
        background-size:contain;
    }
</style>

背景图固定

作用：背景不会随着元素的内容滚动

 属性名：background-attachment
 
属性值：fixed

显示模式

 1.块级元素（例如：div）
	* 独占一整行
	* 宽度默认是父级的100%
	* 添加宽高属性会生效
	
2.行内元素（例如：span）
	* 一行共存多个
	* 尺寸由内容撑开
	* 加宽高不生效
	
3.行内块元素（例如：img）
	* 一行共存多个
	* 默认尺寸由内容撑开
	* 加宽高属性会生效

转换显示模式

 属性名：display
 
属性值：
    block			块级		（独占一行，宽高生效）		例如：div
    inline-block	行内块		（一行共存，宽高生效）		例如：img
    inline			行内		（一行共存，宽高无效）		例如：span

posted on 2023-12-03 09:51 -seventy- 阅读(31) 评论(0) 编辑收藏举报

	属性名：display

	属性值：
	block 块级（独占一行，宽高生效）例如：div
	inline-block 行内块（一行共存，宽高生效）例如：img
	inline 行内（一行共存，宽高无效）例如：span

	<style>
	p {
	color:red; /* 颜色大小控制 */
	font-size:30px; /* 字号大小 */
	}
	</style>

	<link rel="stylesheet" href="./test.css">

	rel 属性（了解）
	1. rel 属性规定当前文档与被链接文档之间的关系
	2. 只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持

	<div style="color:red; font-size:20px;"> 这是div标签 </div>

	行内样式，配合 JavaScript 使用

	1.继承性：
	子级默认继承父级的文章控制属性，当然，如果子级自己有则生效自己的样式，不继承。

	2.层叠性：
	相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
	不同的属性会叠加：不同的CSS属性都生效

	3.优先级：
	优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
	规则内容：选择器优先级高的样式生效
	公式详情：
	/*
	通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
	*/
	即：选中标签的范围越大，优先级越低
	!important 提权功能，提高权重/优先级提到最高，慎用！！

	举例：
	<style>
	.box {
	color:blue !important;
	}
	</style>

	<style>
	p {
	color:red;
	}
	</style>

	使用"标签名"(如：p、div、h1...)作为选择器->选中"同名标签"设置"相同的样式"

	<style>
	.to-red {
	color:red;
	}
	.TO-big {
	font-size:20px;
	}
	</style>

	<body>
	<p class="to-red">111111</p>
	<p>222222</p>
	<p class="to-red TO-big">333333</p>
	</body>

	查找标签，差异化设置标签的显示效果（一个标签可以使用多个类名，当 class 属性值要写多个类名时，类名与类名之间用空格隔开）

	<style>
	#d1 {
	color:red;
	}
	</style>
	<body>
	<div id="d1">111111</div>
	<div>222222</p>
	<div>333333</div>
	</body>

	id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式（注意，同一个id 选择器在一个页面只能使用一次）

	定义：由两个或多个基础选择器，通过不同的方式组合而成
	作用：更准确、高效的选择目标元素（标签）
	类型：
	1.后代选择器
	2.子代选择器
	3.并集选择器
	4.交集选择器

	作用：
	选中某元素的后代元素（包括儿子、孙子、重孙子...）
	写法：
	父选择器子选择器 {
	css属性:值;
	}

	作用：
	选中某元素的子代元素（最近的子级）
	写法：
	父选择器 > 子选择器 {
	css 属性:值;
	}

	作用：
	选中多组标签设置相同的样式
	写法：
	选择器1, 选择器2, 选择器3 {
	css属性:值;
	}

	作用：
	选中同时满足多个条件的元素（了解）
	注意：标签选择器必须书写在最前面
	写法：
	<style>
	/* 既是P标签，又是box类 */`
	p.box {
	color:red;
	}
	</style>
	<body>
	<p class="box">p标签，使用了类选择器</p>
	<p>p标签</p>
	<div class="box">div标签，使用了类选择器</div>
	</body>

	鼠标悬停状态：

	选择器:hover {
	CSS属性:属性值;
	}

	<style>
	/* 任何标签都可以设置鼠标悬停的状态 */
	a:hover {
	color: red;
	text-decoration: none;
	}
	.box:hover {
	color:blue;
	}
	</style>

	<body>
	<a href="#">a标签</a>
	<div class="box">div标签</div>
	</body>

	伪类---超链接

	超链接共有四个状态，分别是：

	:link 访问前
	:visited 访问后
	:hover 鼠标悬停
	:active 点击时（激活）

	提示：如果要给超链接设置以上四个状态，需要按LVHA的顺序书写

	line-height:20px;

	直接写数字的话，将作为当前标签 font-size 属性值的倍数

	font-family:Microsoft YaHei, Heiti SC;

	从左往右，有这个字体就执行这个字体，没有就向右继续执行备胎字体，建议在工作中使用无衬线字体进行兜底 sans-serif

	font:italic 700 30px/2 楷体;

	文字倾斜、文字加粗、字体大小30px、行高2倍、楷体
	(注意：字号和字体必须书写，否则不生效)

	text-indent:2em;

	推荐使用em ，若当前标签的字号的大小为16px,则1em=16px，2em=32px。
	当然也可以使用"数字+px"，但是不推荐。
	首行缩进两个字实例：text-indent:2em;