css总结

于 2021-02-22 13:21:32 发布
阅读量112 收藏
点赞数 2
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53283555/article/details/113074670
版权

css小结

1.1 介绍W3c：
World Wide Web Consortium（万维网联盟）：出网页标准。由W3c组织推出的标准就被称为W3c标准或web标准。

 使用标准的好处：
 1.提高页面的浏览速度；
 2.缩短改版时间；
 3.代码更简洁；
 4.更容易被搜索引擎搜索到；
 5.内容能被更广泛的设备所访问

1.2****web标准的构成
web标准主要用三部分构成：结构，表现，行为。

  • 结构标准对应的主要语言是xhtml
  • 表现标准对应的主要语言是css
  • 行为标准对应的主要语言是JavaScript
  • 制作一个静态页面，主要用到的是xhtml+css

2.2css层叠样式表（Cascading Style Sheets)
概念：更多的人把他称作样式表。它是一种网页样式的工具。结组css的强大功能，网页将在你的丰富想象力下千变万化。实际上css的代码都是又一些最基本的语句构成的。
css可以作为html,xhtml,xml的样式控制语言。
语法：选择符（属性：值）例如：body{font-size:12px;}
2.2.1 css书写格式：4种引入方式

  • 内嵌式引入
    把style标签嵌套在head标签中
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云计算第一课</title>
<style type="text/css>
body{font-size:36px;}
</style>
</head>
  • 行内样式
<b style="font-size:56px;"浏览器不支持iframe.</b>
  • 外链样式
    把css当成是一个文件，通过link标签引入到html标签中
<link rel="stylesheet" type="text/css" href="css/main.css">
  • 嵌入样式
    内嵌和外链的一种综合使用，通常不建议使用
<style type="text/css">
    @import url=("css/style.css")
</style>

以上四种标签中优先级排序为：行内样式>其他三种样式（样式的显示取决于距离，其中哪种样式离修饰的目标越近，就会显示哪种样式）
2.2.2选择符1
1.标签选择符：通过标签的名字来命名的
body{color:red;} p{color:red}
对html中的所有该标签都起作用

2.id选择器： 当标签中出现id属性的 那么可以使用id选择器
Id选择器 通常应用于某些标签中独有的样式
Id选择器的标识

#one{
			color:gold;
		}

3.类选择器：当标签中出现class属性的时候 那么可以使用类选择器
类选择器 通常应用于某几个标签具有相同的样式
类选择器的标识：

.pink{
			color:pink;
		}
<p class="pink">如果得不到支持，iframe 是不可见的。</p>

4.全选择器 使用*号来表示 对整个html中的所有标签都起作用

*{font-size:36px;color:black;}

适用场景： 每种浏览器的默认属性的相关值都不一样，一般情况在网页开发的初始阶段，需要把所有浏览器的默认值 都归到一个统一的默认值下。然后再进行具体其他操作。
2.2.3控制字体

功能语法
设置字号font-size:12px
设置字色color:#000000
设置字体font-family:Arial,‘宋体’
设置行高line-height：150% line-height：1.5em
设置字体的粗细font-weight：normal[正常]bold[粗体]

单位： px 和em 比较常用 建议大家经常使用百分比,适合做屏幕适配
2.2.4css特点
1、继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式
2.2.5控制文本

功能语法
设置对象中文本缩进text-indent：2em 可以为负值
文本水平对齐方式text-align：left[左]center[中]right[右]
对象中空白处理white-space：normal[自动换行] pre[换行和空白受保护]nowrap[强制在同一行显示]
文本大小写控制text-transform：none[正常大小] capitalize[每个单词的第一个字母转换成大写]uppercase[转换成大写]lowercase[转换成小写]
元素的垂直对齐方式vertical-align：sub[设置文字为下标]super[设置文字为上标]top[把元素的顶端与行中最高元素的顶端对齐]text-botton[把元素的低端与父元素字体的低端对齐]

Text-align 它只能控制文本是否居中 不能控制div是否居中
如果想让div居中 要通过盒子模型中margin:0 auto;

所有的网页都要有hn标签 利于搜索引擎搜索
text-indent：-9999em；去隐藏页面的标题。
Text-transform 用于大小写字母转换
2.2.6伪类

状态语法
未访问的链接a:link{color:#ff0000}
已访问的链接a:visited{color:#00ff00}
鼠标移动到链接上a:hover{color:#ff00ff}
鼠标按下到链接上a:active{color:#0000ff}

L -V-H -A

text-decoration: none;

2.2.7选择符2

  • 包含选择符：嵌套 中间用空格间隔 包含选择符的标识是空格
#content p{
        	color:red;
        }
  • 分组选择符 多个选择符同时具备同一种样式 使用分组选择符 标志 ,(逗号)
body,h1,div,p{
	     	margin:0;
	     	padding:0;
	     }
  • 标签指定式选择符： 中间不会存在任何符号
h1#content{
        	color:blue;
        }
  • 组合选择符： 把前面7种选择符 综合的使用在一起
    2.2.8盒子模型
    内边距 padding 用于填充内容内部
    外边距 margin 用于描述浏览器边缘到内容的之间的距离
    边框 border：1px solid black
    像素值 实线 颜色
    Margin：100px 上下左右都是100px的距离
    Margin：100px 200px； 上下100px、左右 200px
    Margin：100px 200px 300px 上100px 左右 200px 下300px
    Margin：100px 200px 300px 400px 上、右、下、左
    Margin-top margin-left margin-right margin-bottom
    边框也适用于4个方向
    2.2.9块状元素和内联元素
    块状元素 具有高度和宽度的属性，但是它不允许其他元素和它同行显示
    代表标签 div p 等等
    块状元素的默认属性： display:block;
    内联元素 不具有宽度和高度的属性 允许其他元素与其同行显示
    代表标签 a span
    内联元素的默认属性 display:inline;
    块状元素和内联元素之间可以进行转换
    Display：none 可以隐藏元素
    2.2.10控制背景
    Html中 使用Img标签
    Css中 使用background-image url();
功能语法
背景background:颜色 图片 平铺方式 固定方式 位置
背景颜色background-color：#ccc；
背景图像background-image：url（背景图像的位置及全称）
背景图像的重复方式background-repeat:[repeat、no-repeat、repeat-x、repeat-y]
背景图像的位置background-position：top[left center right]center[left center right] bottom[left center right],坐标 y坐标[第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素（0px 0px）]
m背景图像的依附方式background-attachment;[scroll、fixed]

2.2.11布局

  • 表格布局 table 淘汰掉了
  • 浮动布局 float 属性
    什么是浮动?
    浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
    值:
    none：不浮动
    left：对象向左浮动，而后面的内容流向对象的右侧
    right：对象向右浮动，而后面的内容流向对象的左侧

Left：
前面的元素浮动效果后，会对后面的元素产生影响

清除浮动

当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响
浮动的清理(clear)
值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象

定位布局
属性：positon
描述：设置对象的定位方式
值：
static 静态定位：页面中的每一个对象的默认值。
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative 相对定位：对象不从文档中分离，通过设置left，right，top、bottom四个方向相对于自身位置进行相对定位
2.2.12overflow

visible[默认值。不剪切内容也不添加滚动条]，
auto[在必需时对象内容才会被裁切或者显示滚动条]，
hidden[ 不显示超过对象的尺寸的内容]，
scroll[总是显示滚动条]

3种隐藏元素的方法：

1.	display：none
2.	width：0 height0
3.	overflow:hidden

4.	<!DOCTYPE html>
5.	<html lang="en">
6.	<head>
7.		<meta charset="UTF-8">
8.		<title>Document</title>
9.		<style type="text/css">
10.		#box{
11.			width: 300px;
12.			height:300px;
13.			overflow: hidden;
14.			border: 1px solid black;
15.		}
16.	
17.	
18.	
19.		</style>
20.	</head>
21.	<body>
22.		<div id="box">
23.	    <img src="image/1.png"/>
24.		</div>
25.	</body>
26.	</html>

2.2.13 zoom
缩放：
normal：默认值。使用对象的实际尺寸
number：百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值
zoom:1 解决ie6高度自适应问题
3.0 css3
css3是css的升级版
• 选择器
• 框模型
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面
3.1 边框
圆角边框
Border-radius：
通常使用单位 像素 百分比 em

可以通过 方向来进行定位

border-top-left-radius:100%;

先上下，后左右

阴影效果
给div 中的图片 加阴影效果比较常用

Box-shadow 10px 10px 5px #888888;

3.2 background新增属性

Background-size：800px 800px;

用于改变图片或者背景图片的大小

Background-origin: content-box padding-box border-box
对内容的定位 对内边距的定位 和对边框的定位
3.3 文本效果

<b> <strong>  <i> <em>

font-weight:blod

文本阴影：
Text-shadow; 用法和 box-shadow类似

自动换行

<b><strong>  <i><em> 
font-weight:blod

文本阴影：
Text-shadow; 用法和 box-shadow类似

自动换行

3.4 2D动画效果
主要通过transform属性来进行使用：

  • 平移:translate() 方法
    通过x和y表示的屏幕横向的坐标位置和屏幕纵向的坐标位置
div:hover{
      	box-shadow: 10px 10px 5px #888888;
      	transform: translate(500px,0px); 
      }
  • 旋转rotate() 方法
    Rotate(30deg) 里面的参数描述的是角度 deg是角度单位 表示旋转（顺时针）
div:hover{
      	box-shadow: 10px 10px 5px #888888;
      	transform: rotate(30deg); 
      }
  • 缩放scale() 方法
     div:hover{
      	box-shadow: 10px 10px 5px #888888;
      	transform: scale(2,2); 
      }

Scale(2,2) 第一个表示宽度2倍 第二个表示高度2倍

  • 翻转skew() 方法
    Skew表示翻转效果 里面两个参数
    参数一表示 X轴 角度在这里插入代码片
    参数二表示Y轴的角度

  • 所有2D组合在一起matrix() 方法

  • 过渡 transiction
    Transiction:
    property(参与过渡效果的属性)
    duartion(过渡效果花费的时间)
    timing（执行速度的快慢）

值描述
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
<!DOCTYPE html>
<html lang="zh">
<head>	
	<meta charset="UTF-8">
	<title>动画</title>
	<style type="text/css">
	body{
		margin:100px;
	}
	div{
        width:200px;
        height:200px;
        background-color:white;
        border:1px solid green;
        animation-name:myani;
        animation-duration:2s;
        animation-timing-function:ease-in;
        /*animation-delay:1s;*/
        /*animation-iteration-count:infinite;*/
        /*animation-direction:alternate;*/
        /*animation-fill-mode:forwards;*/
        /*animation:myani 1s ease 2;*/
	}
	@keyframes myani{
   /*0%,100%{
      backgound-color:white;
      margin-left:0px;
    }
   50%{
        background-color:black;
        margin-left:100px;   
    }*/
    form{
      backgound-color:white;
      margin-left:0px;

    }
    to{
    	background-color:black;
        margin-left:100px;   
    }

}
	</style>
</head>
<body>
	<div>我是html5</div>
</body>
</html>
  • 动画
    @keyframes 规则 用于声明动画的效果
    From-----To
    0%-100%
    自定义的名称

Animation：自定义的名称 5s(执行时间)

  • 透明度:
    opacity: 0.8; 从0-1 1表示不透明 0 表示完全透明。
Emotional*
关注
CSS总结
m0_62627645的博客
07-08 115
CSS总结   CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。   而想要呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。 一、CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 由此说明： 1.选择器是您需要改变样式的对象（上图的规则就一级标题生效）。 2.每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹
css整理笔记
ll31523837790的博客
01-28 206
css 层叠样式表 英文(Cascading Style Sheets） 作用：主要用于修饰 html xhtml html5 xml 让网页有种千变万化的形式。 语法：选择符{属性：值} 一，css的4种引入方式 1.内嵌式引入 把style标签嵌套在head标签中 2，行内样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&lt
HTML+CSS总结.doc
11-17
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css总结1
08-03
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
css-common:常用的css总结
03-22
常用的css总结 CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - ...
关于图片显示问题的CSS总结
04-08
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
CSS 总结
weixin_45970171的博客
10-30 178
CSS 总结 margin-left :左边距 margin-bottom：下边距 消除浏览器bug间距边框 *{ ​ margin:0; ​ padding:0; } background-image: url(“images/bg.png”); 背景图片 text-align: center; 文本居中 line-height：40px； 文字垂直居中(与高度同值则垂直居中) border边框 margin-border外边框 border-bottom：2px solid
104道 CSS 面试题，助你查漏补缺(一)
qq_36291960的博客
10-16 379
CSS 面试知识点总结 最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！作者：CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/
HTML+CSS基础总结与特性解析
CSS则用于布局和美化，如设置元素的边距、浮动等，使网页具有更好的视觉效果。" HTML是一种标记语言，其主要功能是定义网页的结构和内容。HTML文本由一系列的HTML命令组成，这些命令描述了页面上的各种元素，例如...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值