css整理笔记

廖磊�

于 2021-01-28 18:59:29 发布

阅读量193

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/ll31523837790/article/details/113337444

版权

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</title>
	<style type="text/css">
    body{
    	color: red;
    }

	</style>
</head>
<body>
	<p style="font-size:66px">现在骗子真多，刚刚又看到新闻里说储户存款消失，几十万不翼而飞。</p>
	<p>我急忙骑自行车到银行，赶紧插卡输密码查看。</p>
	<p>还好，8快钱还在，这才松了口气。急死我了！</p>
	<p>以后再也不看新闻了，心好累！</p>
</body>
</html>

在这里插入图片描述
3，外链样式
把css当作是一个文件，通过link标签引入到html中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="（路径）">
</head>

4，嵌入样式
内嵌和外链一种综合性的使用，不太常用。

<style type="text/css">
@import url("css/style.css");
</style>

注意：以上4种引入方式的优先级取决于修饰的目标的距离，距离越近优先级就越高。

二.选择符

1.标签选择符：通过标签的名字来命名的。
body{color:red;} p{color:red}
对html中的所有该标签都起作用

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

#nav{color:green;}

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

.nav{color:green;}

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

*nav{color:green;}

5.包含选择符：嵌套中间用空格间隔包含选择符的标识是空格。

#nav p{color：green；}

6.分组选择符：多个选择符同时具备同一种样式使用分组选择符标志 ,(逗号)。

nav，p，bady，h1，div{color：green；}

7.标签指定式选择符：中间不会存在任何符号。

nav#h1{color：green；}

8.组合选择符：把前面7种选择符综合的使用在一起。

三，控制字体

设置字号：font-size：22px；
设置字色：color：#ccc；
设置字体：font-family：”字体“；
设置行高：line-height：1.5em 50%；
设置字体的粗细：font-weight：normal（正常）bold（粗体）；
其中单位px，em比较常用，但是%适合做屏幕适配。

四，css特点

1.继承：网页中的子元素，将继承父元素的样式。可以理解为子承父业。

层叠：网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式，后面定义的样式，会覆盖前面定义的样式。

五，控制文本

1.设置对象中文本缩进：text-indent：2em；可以为负值。可用来隐藏标题
2.文本水平对齐方式：text-align：left center right；{只能控制文本是否居中不能控制div是否居中}
3.对象中空白处理：white-space：normal（自动换行）pre（换行和空白受保护）nowrap（强制在同一行显示）
4.文本大小写控制：text-transform：none（正常大小）capitalize（第一个字母转换成大写）uppercase（转换成大写）lowercase（转换小写）；
5.元素的垂直对齐方式：vertical-align：sub[设置文字为下标]super[设置文字为上标]top[把元素的顶端与行中最高元素的顶端对齐]text-botton[把元素的低端与父元素字体的低端对齐]

六，伪类

未访问的链接：a:link{color:#ccc}
已访问的链接：a:visited{color:#ccc}
鼠标移动到链接上：a:hover{color:#ccc}
鼠标按下到链接上：a:active{color:#ccc}
顺序为：L-V-H-A

七，盒子模型

在这里插入图片描述
内边距 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个方向。

八，快状元素与内联元素

块状元素具有高度和宽度的属性，但是它不允许其他元素和它同行显示
代表标签 div p 等等
块状元素的默认属性： display:block;

div{
display：block；
}

内联元素不具有宽度和高度的属性允许其他元素与其同行显示
代表标签 a span
内联元素的默认属性 display:inline;

a{
display：inline；
}

块状元素和内联元素之间可以进行转换。
Display：none 可以隐藏元素

九，控制背景

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）]
背景图像的依附方式 background-attachment;[scroll（滚动）、fixed（固定）]

十，布局

浮动布局
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
属性float 值:
none：不浮动。
left：对象向左浮动，而后面的内容流向对象的右侧。
right：对象向右浮动。
在这里插入图片描述

如果我们将red部分右浮动则会出现：

当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响
浮动的清理(clear)
值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象
定位布局
属性：positon
描述：设置对象的定位方式
值：
static 静态定位：页面中的每一个对象的默认值。
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。（绝对定位不受父元素影响）在这里插入图片描述

relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位（相对定位受父元素影响）

一十一，overflow

1.visible[默认值。不剪切内容也不添加滚动条]。
2.auto[在必需时对象内容才会被裁切或者显示滚动条]。
3.hidden[ 不显示超过对象的尺寸的内容]。
4.scroll[总是显示滚动条]。
3种隐藏元素的方法：
1.display：none
2.width：0 height0
3.overflow:hidden

css3

一，边框
圆角边框：border-radius：通常使用单位像素百分比 em ；
可以通过方向来进行定位：border-top-left-radius:100%;
先上下，后左右

阴影效果
给div 中的图片加阴影效果比较常用
Box-shadow 10px 10px 5px #ccc;
二，background 新增属性
Background-size：800px 800px;用于改变图片或者背景图片的大小
Background-origin: content-box padding-box border-box 对内容的定位对内边距的定位和对边框的定位。
三，文本效果
文本阴影：
Text-shadow; 用法和 box-shadow类似
自动换行：

word-wrap:break-word;

2D动画效果
transform属性值：translate(平移)
通过x和y表示的屏幕横向的坐标位置和屏幕纵向的坐标位置

 div:hover{
      	box-shadow: 10px 10px 5px #888888;
      	transform: translate(500px,0px); 
      }

                   rotate(旋转)

div:hover{
      	box-shadow: 10px 10px 5px #888888;
      	transform: rotate(30deg); 
      }

Rotate(30deg) 里面的参数描述的是角度 deg是角度单位表示旋转（顺时针）
scale(缩放)

 div:hover{
      	box-shadow: 10px 10px 5px #888888;
      	transform: scale(2,2); 
      }

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

Skew表示翻转效果里面两个参数

div:hover{box-shadow:10px 10px 5px #888888;
           transform:skew(30deg,30deg);
           }

参数一表示 X轴角度
参数二表示Y轴的角度
过渡 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)）。
透明度:
opacity: 0.8; 从0-1 ,1表示不透明 ,0 表示完全透明。

廖磊�

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css整理笔记

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
复制链接

扫一扫