【CSS基础】

最新推荐文章于 2024-05-30 15:01:09 发布

DHH.

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量35

点赞数 1

文章标签： css 前端 java

本文链接：https://blog.csdn.net/qq_61513126/article/details/133522075

版权

CSS 概述

CSS是Cascading Style Sheets（级联样式表）。
CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如， CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用
于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

基础语法

1.css的分类:标签样式表,类样式表,id样式表，组合样式
2.css从位置上的分类：嵌入式样式表，内部样式表（就近原则），外部样式表

CSS与HTML的关系

HTML是网页内容
CSS定义页面的样式

基础语法-行内样式表法

在这里插入图片描述

基本语法-内嵌样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
在这里插入图片描述

基本语法-外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通
过link标签将外部样式表文件链接到HTML文档中.
在这里插入图片描述

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选
择器。
常用的选择器：

标签选择器：通过标签选择器可以选择页面中的所有指定标签语法：标签名 {}
类选择器：通过标签的class属性值选中一组标签
语法：.class属性值{}
id 选择器：通过标签的id属性值选中唯一的一个标签
语法： #id属性值
{}通配选择器:可以用来选中页面中的所有的标签语法：*{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器 */
			/* p{
				color:red;font-size:18px;	
			} */
			/* 类选择器 */
			/* 类名前面加点，识别类名 */
			.ptitle{
				color:red;font-size:20px;
			}
			.pc{
				color:green;font-size:18px;
			}
			/* id选择器：# + id 优先级高于类选择器*/
			#pid{
				color:blue;font-size:18px;
			}
			
			/* 通配选择器: 选中索引标签，优先级最低 */
			*{
				color:yellow;
			}
			/* 
			选择器优先级：id-> class -> p -> * 
			 */
		</style>
	</head>
	<body>
		<!-- 类选择器 -->
		<p class="ptitle" id="pid">静夜思</p>
		<p class="pc">床前明月光，</p>
		<p class="pc">疑是地上霜。</p>
		<p class="pc">举头望明月，</p>
		<p class="pc">低头思故乡。</p>
		<p>我要是李白</p>
	</body>
</html>

** 文本**

color：字体颜色
font-size：字体大小
font-family：字体
text-align：文本对齐
text-decoration:line-through：定义穿过文本下的一条线
text-decoration:underline：定义文本下的一条线
text-decoration:none：定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
line-height:设置行高
letter-spacing可以指定字符间距
text-indent用来设置首行缩进
背景
background-color背景颜色
background-image背景图片
background-repeat背景重复
background-size背景尺寸
background- position 背景位置
CSS 列表

CSS 伪类

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

伪类的语法：
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				color: green;
				text-decoration: none;
			}
			a:hover{
				/* background-color: red; */
				color: white;
				text-decoration: underline;
				font-size: 1.25rem;
			}
			a:active{
				color: blue;
			}
			input:focus{
				background-color: whitesmoke;
			}
		</style>
	</head>
	<body>
		<a href="">百度</a>
		<a href="">百度</a>
		<a href="">百度</a> <br>
		<input type="text" name="" id="" value="1" /><br>
		<input type="text" name="" id="" value="2" /><br>
		<input type="text" name="" id="" value="3" /><br>
		<input type="text" name="" id="" value="4" /><br>
	</body>
</html>

透明度

定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别值为1。
规定不透明度：从 0.0 （完全透明）到1.0（完全不透明）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			img{
				opacity: 0.5;
			}
			img:hover{
				opacity: 0.7;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" height="700px" width="500">
	</body>
</html>

块级,行级,行级块标签

什么是块级标签？
块级标签：无论内容多少都会独自占据一行的。
例如< p>、< h1>、< ul>、< ol>、< hr/>等。
什么是行级标签？
行级标签：只占自身大小的标签，不会占一行。
例如< font>、< b>、< i>、< a>等
什么是行级块标签？例如 < input/> < img>等

在这里插入图片描述

div

div标签
div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。

> - span标签

span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。

盒子模型
CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			/* body{
				margin: 0;
				padding: 0;
				background-color: #808080;
			} */
			
			#div_top{
				background-color: orange;
				height:20%;
			}
			#div_left{
				background-color: greenyellow;
				height:80%;
				width:15%;
				float:left;
			}
			#div_main{
				background-color: whitesmoke;
				height:70%;
				float: left;
				width: 85%;
			}
			#div_bottom{
				background-color: sandybrown;
				height:10%;
				width: 85%;
				float: right;
			}
			#div_container{
				height: 400px;
				width: 400px;
				border: 1px solid blu;
				margin-left: 10;
			}
		</style>
	</head>
	<body>	
	<div id="div_container">
		<div id="div_top">div-top</div>
		<div id="div_left">div-left</div>
		<div id="div_main">div-main</div>
		<div id="div_bottom">div-bottom</div>
	</div>
		
	</body>
</html>

在这里插入图片描述

内容区：

内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。
通过width和height两个属性可以设置内容区的大小而不是整个盒子的小。
如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。
width和height属性适用于块标签。

内边距：padding
内边距指的就是标签内容区与边框以内的空间。
内边距影响整个盒子的大小。使用padding属性来设置标签的内边距。：相当与填充，
例如：
padding-left:10px;
padding-right:10px;
padding:10px 20px 30px 40px
这样会设置标签的上、右、下、左四个方向的内边距。

边框：border

可以在标签周围创建边框，边框是标签可见框的最外部。

border:1px red solid; 上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

边框样式：dotted （点线） dashed （虚线） solid （实线） double （双线）

groove （槽线）

border-radius：设置四个角为圆角边框
border-top-left-radius：设置左上为圆角边框

外边距margin:
外边距是标签边框与周围标签相距的空间。使用margin属性可以设置
外边距。用法和padding类似，同样也提供了四个方向的。

清楚浏览器的默认样式

文档流

浮动：float

当一个标签浮动以后，其下方的标签会上移。
浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流,这时不会再影响父标签的高度,也就是浮动标签不会撑开父标签。

在这里插入图片描述

CSS定位（position）

相对定位relative:
    相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。

    可以通过position:relative; 开启相对定位，
    left right top bottom四个属性来设置标签的偏移量。
相对定位的特点 当标签的position属性设置为relative时，则开启了标签的相对定位
1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流

绝对定位（absolute）：

绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。 可以通过position:
absolute; 开启绝对定位，left right top bottom四个属性来设置标签的偏移量

绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

DHH.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【CSS基础】

CSS是Cascading Style Sheets（级联样式表）。CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如， CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
复制链接

扫一扫