CSS基础

最新推荐文章于 2024-07-21 20:52:32 发布

Yue_1214

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量224

点赞数 2

文章标签： CSS基础

本文链接：https://blog.csdn.net/weixin_43256788/article/details/96605014

版权

CSS基础

CSS 指层叠样式表 (Cascading Style Sheets)
W3school

1.CSS入门：——>三种方式

<head>
		<meta charset="utf-8" />
		<title>标题</title>
		<style>
			/*
			 * 选择器{
			 * 	样式；
			 * }
    标签、类、id选择器，其他选择器：并集、交集、通配符选择器
			 */
			a{
				color: red;
				font-size: 26px;
				/*文本修饰：去掉下划线*/
				text-decoration: none;
			}
		</style>
		<!--特点：可以一次性控制多个标签
			缺点：和HTML标签混合使用
		-->
  </head>
  <body>
  <!--CSS使用方式1——>**行内样式**
			弊端：1、一次只能控制一个标签
                         2、CSS代码：font-size: 36px;color: red；
                         与HTML标签混合使用，后期不利于管理
		-->
	<a style="font-size: 36px;color: red;" href="#">超链接1</a><br />
	<!--CSS使用方式2——>**内部方式**
			在head标签中指定一个子标签：style标签：里面书写CSS代码
			style{
				CSS属性名称：css属性值
			}
		-->
	<!--CSS使用方式3——>**外部方式**（实际开发中推荐方式）
           需要在CSS文件夹中单独写CSS代码
		在当前页面使用link（在head标签中指定）标签引入外部css文件即可
		stylesheet:样式库（样式代码必须在样式库中定义）
		rel:固定写法：关联层叠样式表
		-->
		<!--<link href="???.css" rel="stylesheet"/>-->在head中书写
		<a href="#">超链接1</a><br />
		<a href="#">超链接2</a><br />
		<a href="#">超链接3</a><br />
	</body>

2.选择器

CSS选择器：标签选择器、类（class）选择器、id选择器
其他的选择器：并集、交集（子元素选择器）、通配符（*{}）选择器
伪类选择器：研究鼠标经过标签的4中状态

标签选择器:

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

类选择器：
在标签中给定class属性（同一个html页面上多个标签可以指定同名的class属性）格式：

 .class属性值{
        CSS属性：CSS属性值;
    }

class选择器的优先级>标签选择器

id选择器：

注意：（1）标签中给定一个id属性
（2）在同一个HTML标签中，多个标签的id属性必须唯一
后面的js：DOM编程：
document.getElementById(“id属性值”)

格式：#id属性值{
      CSS属性：CSS属性值
}

id选择器的优先级>class选择器>标签选择器
并集选择器：选择器1,选择器2…{}
交集（子元素）选择器：选择器1 选择器2…{}【选择器2的元素是选择器1的子元素】
浏览器拆分表格：
将表格的所有行：划分tbody标签中
表格标签默认拆分为三个部分
thead头部分，tbody中间内容部分，tfoot脚部分
将表格拆分三部分之后，为了解决用户体验问题，无需将table标签加载完毕就可以访问

伪类选择器：
又称为（锚伪类），描述鼠标控制标签的状态
link状态：当前标签没有访问过的状态
hover状态：鼠标经过标签的一种状态(使用最多)
active状态：激活状态（点击但没有松开状态）
visit状态：访问过多状态（点击后并且松开了）
格式：选择器：状态名称{css样式;}
循环显示格式：link、visit、hover、active
注意：在CSS定义，hover必须置于link、visit之后，active必须置于hover之后才有效
鼠标经过每一行，当前行的背景色变为蓝色（除过表头）：css背景属性background-color【表头用thead，后面的用tbody（控制tbody下的tr：hover）】

tbody tr:hover{
    background-color:blue;
}

body体可以看成一个大的div
display：none（图片的隐藏）、block（显示）、inline（设置元素在同一行上）

3.CSS常见的样式属性【div+css】

CSS字体属性、文本属性、背景属性、表格属性、边框属性、浮动属性、列表属性
（1）CSS文本常用属性：
字体颜色属性：color
字符间距:letter-spacing
文本排列：text-align
文本修饰：text-decoration（none：无下划线；underline：下划线；overline：上划线；line-through：中划线）应用场景：电商网站中：商场价、市场价（折扣）
单词间距：word-spacing（系统默认：将两个字符组成一个单词）
（2）CSS字体：
front-family：指定字体的类型（字体库存在类型）
front-size：字体大小
front-style：字体样式（normal:默认标准、italic：斜体、oblique：倾斜）
front-weight：字体粗细程度（如果不指定为normal、bold:适当加粗、bolder：更粗）
简写属性（符合顺序）

front：front-style front-weight front-size front-family；

（3）CSS背景常用属性
background-color：背景颜色
background-image：背景图片url（…）
background-repeat:设置背景图片是否重复以及如何重复，如果没有指定这个属性：默认值为repeat（x轴y轴都重复）、no-repeat（无重复）、repeat-x、repeat-y
background-position：设置背景图片的起始位置，默认值：top left
【图片位置：top（全）、center（一半）、bottom（无）】
【浏览器位置:left、center、right】
背景简写：（顺序）background：background-color background-image background-repeat background-position
（4）CSS表格属性
将表格的边框线与单元格之间空隙：border-collapse：collapse;
【table表格：标签属性：cellspacing （两个意思同）】
（5）CSS边框
div标签的边框显示：（1）边框的颜色、宽度、样式（单实线、双实线、虚线、点）

div{
    <!--指定div块标签的宽度与高度-->
    width：200px;
    height:200px;
    <!--块标签：四个边 边框颜色-->
    border-top-color：blue;
    border-left-color：blue;
    border-right-color：blue;
    border-bottom-color：blue;
    <!--四个边框的宽度-->
    border-top-width：20px;
    border-left-width：20px;
    border-right-width：20px;
    border-bottom-width：20px;
    <!--四个边的样式（显示）
    div标签要显示边框必须要指定style
    -->
     border-top-style：solid;单
     border-top-style：dashed;虚
     border-top-style：dotted;点
     border-top-style：double;双  
}
（1）边框颜色、宽度、样式简写属性：
border-color：上 右 下 左（默认）
（2）如果某一个边没有设置边框颜色、宽度、样式，会补齐对边的颜色、宽度、样式
（3）边框的简写属性
border：border-width border-style border-color;

（6）CSS浮动（层级布局）
浮动属性：float
给某个元素设置浮动之后（left、right），当前元素就脱离了
当前文档流，当前元素不占一行空间，后边的元素就进行移动。
【清除浮动属性】clear属性：both（当前元素的左右两边没有浮动元素）
（7）CSS列表属性
list-style-type：none（去掉列表的标记）
list-style-image：url（路径）

4.盒子模型

【都符合边框属性的特点：上右下左】
将所有的元素（标签），使用div进行包裹设置每一个标签对应的样式
padding：具体内容与边框之间的距离
margin：盒子与盒子（将标签使用div包裹起来）之间的距离

5.CSS定位（三种方式）

定位属性：position
（1）绝对定位：absolute：针对父标签（body）进行移动（向下、向右）
（2）相对定位：relative:针对之前元素进行移动（常用）
（3）固定定位：fixed：随着滚动条滚动，永远在网页中间
应用场景：网站中间弹出对话框，随着滚动条滚动，永远在网页中间。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width:200px;
				height: 200px;
				border: 1px solid #000;
			}
			#div1{
				background-color: #F00;
			}
			#div2{
				background-color: #00F;
			}
			#div3{
				background-color: #0F0;
				/*position: absolute;*/
				position:relative;
				top:20px;
				left: 20px;
				/*定位属性 absolute：top、left*/
			}
		</style>
	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
	</body>
</html>

Yue_1214

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSS基础CSS 指层叠样式表 (Cascading Style Sheets)W3school1.CSS入门：——>三种方式<head> <meta charset="utf-8" /> <title>标题</title> <style> /* * 选择器{ * 样式； * }...
复制链接

扫一扫