CSS常用属性

最新推荐文章于 2024-05-17 13:46:59 发布

weixin_45768979

最新推荐文章于 2024-05-17 13:46:59 发布

阅读量323

点赞数

分类专栏：学习总结

本文链接：https://blog.csdn.net/weixin_45768979/article/details/103569347

版权

学习总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS

CSS（Cascade Style Sheets）层叠样式表, 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

注意:CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能

使用语法:

1.选择器: 选中一个或者多个元素
		 基础选择器:
			元素选择器: 根据元素根据元素的标签名选中一个或一组元素
		 属性选择器:
		 伪类选择器:
		 伪元素选择器..

2.css的使用语法
		选择器{
			样式1;
			样式2;
			//样式:样式名:样式值
		}

3.使用方式
	1.行内样式表:
		在行的内部使用,定义一个style属性,属性中定义样式,只作用于当前这个元素
		<p stytle="color:red,font-size:50px;">这是一段文本</p>
		在当前元素使用 style 属性的声明方式。
		style 是行内样式属性；	
		color 是颜色属性；red 是颜色属性值；		
		font-size是字体大小属性；50px 是字体大小属性值	
	
	2.内部样式表:
	在html文档head中定义style标签对,标签对中定义样式
		<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内部样式表 -->
		<style>
			p{
				 background: red;
				 color: #fff;
			}
		</style> 
	</head>
	<body>
		
		 <p>我是p1</p>
		 <p style="background: deeppink;color: aquamarine;">我是p2</p>
		 <p>我是p3</p>
	</body>
</html>
	
	3.外部样式表   --推荐 
	在外部单独定义一个css文件,文件中定义样式,哪一个html需要使用,就引入link
	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        
		<!-- 外部样式表 -->
		<link rel="stylesheet" type="text/css" href="css/first.css"/>
		
	</head>
	<body>
		 <p>我是p1</p>
		 <p style="background: deeppink;color: aquamarine;">我是p2</p>
		 <p>我是p3</p>
	</body>
</html>
	优先级问题: 谁离元素更近,优先显示谁
		行内样式表>内部样式表>外部样式表

CSS选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

常用的有:

基础选择器:
- 元素选择器: 根据元素的标签名选中一个或多个元素
- 类选择器: 根据元素的class属性值,选取一个或多个元素
  - 一个HTML页面中class属性值可以重复,可以有多个
- #id选择器: 页面中id的属性值不可重复,定义唯一的一个
- *通配符:选中页面中的所有元素
基础选择器优先级:id>class>元素选择器>通配符
后代选择器:父级选择器子集选择器{样式…}
- 某个元素的某些子元素
群组选择器:通过连接多个选择器,选中他们能够匹配到的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
          /*通用选择器*/
            /*使用方式:*{}   */
			*{
				padding: 0;
				margin: 0;
			}
          /*元素选择器*/  
            /* 使用方式: 元素名称{......} */
			div{
				color: yellow;
			}
          /*元素选择器*/ 
			span{
				color: yellow;
			}
          /*类选择器*/  
            /* 使用方式: .class属性值{......} */
			.blue{
				background: blue;
			}
          /*类选择器*/  
			.p1{
				width: 500px;
			}
          /*id选择器*/
            /* 使用方式: #id属性值{......} */
			#div1{
				width: 100px;
				height: 100px;
				border: 1px dashed #008000;
			}
          /*后代选择器*/
            /* 选择器1 选择器2{......} */
			ul li{
				background: indianred;
			}
         /*分组选择器*/
			div,p,span,ol li{
				font-size:30px;
			}
		
		</style>
	</head>
	<body>
		
		 <div id="div1">我是div1</div>
		 <div class="blue">我是div2</div>
		 <p class="blue p1">我是p1</p>
		 <span>我是span1</span>
		 
		 <ul>
			 <li>奔驰</li>
			 <li>宝马</li>
			 <li>奥迪</li>
		 </ul>
		 <ol>
			 <li>别墅</li>
			 <li>洋房</li>
		 </ol>	 
</html>

css常用背景属性设置:

常用样式:
背景:
背景颜色 background-color
背景图片 background-image

值	描述
repeat	默认.背景图像将在垂直方向和水平方向重复
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次

背景是否重复 background-repeat
默认平铺

背景图片的大小background-size
背景图片的位置
background-position
复合属性: background:颜色图片重复位置;
个数,顺序可以随意改变
尺寸:
width
height
单位都是像素值
颜色:
背景颜色
字体颜色
颜色的英文单词 :red…
颜色十六进制
颜色三原色 rgb
rgba a->透明度 0完全透明 1完全不透明

opacity :元素的透明度
元素还是占文档流中的位置

文本:

字体颜色:
	color:red;/*红色*/
字体大小:
	font-size:30px;/*字体大小 px为单位*/
字体样式:
    font-family:"华文行楷"/*文字样式*/
文本水平对齐方式:
	text-align: center;/*文本居中*/
行内块级元素:
display:inline-block;/*行内块元素*/
字体加粗:
	font-weight:bolder;
斜体或正常:
	font-style: italic;
行高:与容器的高度相同,容器中这一样的内容在容器中是垂直居中,因为一行的内容在这一行中默认垂直居中
	line-height: 50px
首行缩进:
	text-indent: 2em;/*首行缩进2个字符*/
去除下划线:
	text-decoration: none;/*去除下划线*/
去除列表项标记:
	list-style:none;/*去除列表项标记*/

盒子模型:

盒子模型的组成:

内容+内边距+边框外边距+边框

内容:
- 宽高都是内容的大小
内边距
- 背景的样式会默认延伸到内边距上
- 设置值(内边距+外边距的方式)
  - 一个值: 四边都是
  - 两个值: 上下左右
  - 三个值: 上右下左边与右边一致
  - 四个值: 上右下左
```
padding-left|padding-right|padding-top|padding-buttom
```
边框:
- 边框三要素: 宽度样式颜色;
- 元素四边相同的样式: boder:10px solid firebrick;
- 元素四边不同的样式: border-left:10px solid firebrick;
外边距:
- 元素距离周围其他元素之间的距离
- 设置值的方式与内边距一样
- 块元素上下的外边距会合并
盒子模型的使用:根据具体的需求分析: 边框宽高边框和内容之间(内边距) 变框和其他元素之间的距离(外边距) 元素和元素之间的距离没有变框或背景的情况(内外边距都可以)

定位与浮动

CSS 定位 (positioning) 属性允许你对元素进行定位，定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制:普通流浮动和绝对定位

除非专门指定，否则所有框都在普通流中定位，即普通流中的元素的位置由元素在HTML 中的位置决定

浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。默认的书写方式即是普通流。

定位
position: 配合方向值一起使用才有用
	relative:相对定位
		相对元素本身在文档流中的原位置而言
	absolute: 绝对定位 完全脱离普通流
		子父级定位
			父元素有设置相对定位,子元素相对对父级定位

		相对窗体定位:
			父元素没有设置相对定位,相对于窗口定位
	
	fixed 固定定位 完全脱离文档流

float的属性值有none、left、right。

只有横向浮动，并没有纵向浮动。
当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
会将元素的display属性变更为block。
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

浮动:
	让元素按照一定的方向进行移动,当遇到其他浮动元素或浏览器边界的时候停止移动
float: 浮动
	left:让元素向左移动
	right:让元素向右移动

清除浮动:
	claer
		left: 我的左边不能有浮动元素
		right:我的右边不能有浮动元素
		both: 我两边不能有浮动元素

		1.使用clear属性
		2.给父级高度
		3.在父级中定义,overflow:hidden

	应用场景: 被我们使用在  让块元素一行显示

块元素一行显示:
	1.浮动
	2.display:
		inline 行内元素
		block 块元素
		inline-block 行内块
			行内与块的特点都存在
				宽度由内容撑起
				可以设置款宽高
				浮动效果(清除浮动问题)和设置inline-block效果几乎一致