CSS

最新推荐文章于 2024-03-03 12:59:43 发布

chenting3375

最新推荐文章于 2024-03-03 12:59:43 发布

阅读量99

点赞数

原文链接：https://my.oschina.net/u/4155188/blog/3067148

版权

css：

1.作用：设置元素样式，美化页面

2.css：层叠样式标签

3.css的语法：

选择器 {

属性：属性值;

}

4.css的三种书写方式

1.行内样式：写在标签里面

2.内嵌样式：在head中写上一对style标签，将css写在style标签中

3.外联样式：在外面有一个样式文件，通过在HTML中使用一个link标签引入到HTML中 <link rel="stylesheet" href="样式文件路径">

5.颜色属性： color

值的三种表示方式：

1.使用表示颜色的单词

2.使用十六进制 #nnnnnn n的取值范围：0-9 a-f

3.rgb表示法： rgb(n,n,n) n的取值：0-255

6.字体属性

字体大小：font-size

字体粗细：font-weight 当设置的值是数字的时候，不需要带单位

字体风格：font-style

字体类型：font-family

值的三种表示方式

1.使用中文

2.使用英文

3.使用Unicode编码 escape()

字体综合写法：

font：font-style font-weight font-size font-family

注意：font-size和font-family一定不能少，而且位置不能换，其他可选

7.css中的选择器：选择要设置样式的元素的一种方式

1.基础选择器

1.标签选择器

2.类选择器

特点：

1.一个类可以被多个元素使用

2.一个元素可以同时拥有多个类名，但是每个类名之间必须用空格隔开

3.id选择器

特点：

唯一性：在同一个页面只能有一个叫这个名字的id的元素

4.通配符选择器

* {

属性：属性值;

}

8.类和id的命名规则

1.命名中可以有字母、数字、下划线_、短横线-

2.命名不能使用数字开头

3.不能使用单个短横线

4.不能使用短横线+数字开头

建议：

1.类和id的命名的时候尽可能有意义（见名知义）

2.命名尽可能使用驼峰命名法

驼峰命名法：当有多个单词组成的一个词的时候，第一个单词的首字母小写，后面每个单词的首字母大写

如：userName

1.链接伪类选择器：补充：:focus 聚焦

:link 链接只对a标签有效

:visited 访问之后只对a标签有效

:hover 悬停，悬浮对所有的元素都有效

:active 活动，激活对所有的元素都有效

注意：这四个链接伪类选择器在同时使用的时候是有顺序的：

顺序： :link :visited :hover :active

记忆： lv真hao

2.目标伪类选择器：就是给要选择的元素添加一些特殊的样式，结合a标签的文本定位使用--> 实现当前页面定位

<!-- 语法： 1.需要给定位过去的标签添加一个id属性 id="id值"

:target { 2.第二步：herf="#id值"

属性：属性值;

} -->

3. 结构伪类选择器：就是从HTML的结构上来选择元素

E:first-child {

属性：属性值;

}

E:last-child {

属性：属性值;

}

E:nth-child(n) { 从前往后算

属性：属性值; 如 li:nth-child(3) {color: red;}

}

E:nth-last-child(n) { 从后往前算

属性：属性值;

}

n: 就是我们要选择的元素在HTML的结构（我们必须先找到要选择的这个元素的父元素）上是第几个孩子元素，n就是几

2.文本操作属性

1.文本首行缩进： text-indent em:相对长度单位

2.文本水平位置： text-align：left; center right

3.文本修饰线： text-decoration none：去除修饰线

4.字间距

lette-spacing

word-spacing

5.文字阴影

text-shadow：水平阴影位置垂直阴影位置模糊程度阴影颜色

6.复合选择器

1.后代选择器选择器与选择器间用空格连接*********************

选择器1 选择器2 选择器3 +…… {

属性：属性值;

}

2.子代选择器：*****

选择器1>选择器2+…… {

属性：属性值;

}

注意：子代选择器只能选择直接子元素（只能选择儿子）

3.并集选择器 ***************

选择器1，选择器2，+…… {

属性：属性值;

}

4.交集选择器 **

选择器1选择器2+…… {

属性：属性值;

}

注意：如果交集选择器中有标签选择器，标签选择器要写在最前面

5.属性选择器

E:[attr=val]: 表示元素E中的属性attr的值是val; input使用input[type="password"]{} E[attr]:表示只要元素E存在attr这个属性即可;

E[att^=val] : 表示元素E的属性attr的值是以val开头的;

E[att$=val] : 表示元素E的属性attr的值是以val结尾的;

E[att*=val] : 表示元素E的属性attr的值中存在val即可;

6.兄弟选择器如 .one+.two {color: pink; }

选择器1+选择器2+…… {

属性：属性值;

}

注意：兄弟选择器只能选择相邻的下一个兄弟元素

7.伪元素选择器：

::first-letter 第一个字符

::first-line 第一行

::selection; 选择的区域改变样式

在HTML的结构中没有这个元素，只会在浏览器加载的时候添加到HTML结构中

::before 在…………之前

::after 在…………之后*/

注意： ::before和::after两个伪元素选择器必须配合content一起使用果;*/*********

这两个伪元素选择器必须配合content一起使用才有效果

如div::before {

content: "要加的文字";

color: pink;

font-size: 30px;

}

8.背景相关 **************

1.背景颜色 background-color

2.背景图片 background-image: url('./images/3.jpg');

3.背景是否平铺 background-repeat: no-repeat;

4.背景图片位置 background-position: 10px 20px ;

1.背景附着： background-attachment: scroll: 默认的，滚动 fixed：固定

2.背景综合写法：background: background-image background-repeat background-position；

3.背景透明度设置： rgba(n,n,n,m) n的取值：0-255 m的取值：0-1

4.背景图片大小设置： background-size：10px 10px; background-size：cover;

cover图片会等比例缩放至铺满整个盒子，可能图片会超出盒子，但是图片不变形

contain 这种情况，图片缩放的时候高度或者是宽度有一边和盒子的宽度或者高度相等的时候，图片不在缩放，保证图片始终都在盒子里面不超出盒子

5.css的三大特性：

1.层叠性：

对于同一个元素的同一个属性，后面的样式覆盖前面的样式，优先级高的覆盖优先级低的

2.继承性

后代元素获取父辈元素的样式

继承中的特殊：

1.a标签不继承颜色

2.h系列标签不继承字体粗细和字体大小

3.高度不能被继承

3.优先级

css的优先级：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

注意：important不能被继承

6.行高： line-height

行高=盒子高度盒子中的单行文本垂直居中

7.元素常见的三种显示方式

1.行内元素： display:inline

特点：

1.大小由内容决定

2.一行显示多个

3.不能设置有效宽高

常见行内元素： span、a、em、strong、ins、del、img（特殊的）

2.块级元素: display: block

特点：

1.独占一行

2.可以设置有效宽高

常见的块级元素： div、p、h1-h6、ul、li、ol、dl、dt、dd

3.行内块级元素 : display: inline-block

特点：

1.一行显示多个

2.可以设置有效宽高

常见：input、textarea、select

8.元素常见三种显示方式之间的相互转换

display: block（块）; inline（行）inline-block（行内块）

9.复合选择器的权重计算

复合选择器的权重计算： 4个n算法 (n n n n)

从左边开始：

第一个n表示!important的个数

第二个n表示id选择器的个数

第三个n表示类选择器的个数

第四个n表示标签选择器的个数

如何比较：

从左边第一个n开始比较，如果第一个n大，那么后面的n不需要再比较，那么就第一个n大的这个选择器的权重高，如果第一个n相等，那么继续比较第二个n，依次类推，比较完毕，如果所有的n都相等，表示这两个选择器的权重一样，那么后面的将前面层叠注意：如果出现了！important的时候，一定要看是继承的还是就是元素本身

10.盒子模型：

1.页面布局的本质：摆放盒子的过程

2.盒子模型的作用：帮助我们布局页面

3.盒子模型的组成：

1.内容 content

2.内边距 padding

3.边框 border

4.外边距 margin

4.边框：

borde-width：边框宽度

border-color:边框颜色

border-style：边框样式

solid: 实线

dashed: 虚线

dotted：点线

double：双实线

border综合写法：

border：border-width border-style border-color；

四边边框：

上边框：border-top

下边框：border-bottom

左边框：border-left

右边框：border-right

边框初始化；

初始边框

border: none;

初始化外轮廓线

outline: none;

1.表格细线边框：

border-collapse：collapse

2.圆角边框

border-radius

3.盒子模型中的内边距 /*padding的取值：

1.一个值的时候：表示上右下左都是这个内边距值

2.两个值的时候：第一个表示上下内边距；第二个表示左右内边距

3.三个值的时候：第一个表示上内边距；第二个表示左右内边距；第三个表示下内边距

4.四个值的时候：依次表示上右下左内边距（顺时针方向）*/ 上内边距：padding-top 下内边距：padding-bottom 左内边距：padding-left 右内边距：padding-right

4.盒子模型中的margin：

margin的取值：

1.一个值的时候：表示上下左右都是这个外边距值

2.两个值的时候：第一个表示上下外边距；第二个表示左右外边距

3.三个值的时候：第一个表示上外边距；第二个表示左右外边距；第三个表示下外边距

4.四个值的时候：依次表示上右下左外边距

上外边距：margin-top 下外边距：margin-bottom 左外边距：margin-left 右外边距：margin-right 5.margin的塌陷

1.margin的垂直塌陷

解决：没有办法解决，布局的时候尽量避免

2.margin包含垂直塌陷

解决：

1.给父元素添加边框

2.给父元素设置overflow：hidden 触发了css中的BFC

6.影响盒子大小的因素

padding和border会影响盒子大小

盒子计算：

盒子真实宽度：width+左右border+左右padding

盒子真实高度：height+上下border+上下padding

7.内外边距初始化：

margin：0；

padding：0；

8.盒子水平居中

margin：0 auto; margin: auto;

9.标准流

10.css布局的三种机制：

1.标准流

2.浮动

3.定位

11.浮动

浮动的最初目的：做文字环绕图片效果

现在目的：帮助我们快速布局页面

12.浮动使用

float：left、right

不是清除浮动的解决方式：直接给父盒子设置高度

<!-- 做网页的过程中：

HTML的结构代码越简单越好，越有语义化越好 -->

清除浮动的方式：

1.给父盒子设置overflow：hidden 一般不推荐使用

2.使用额外标签法 w3c推荐的我不推荐

3.伪元素清除浮动

设置伪元素清除浮动的类

.clearfix::after {

content: '.'; /* ::after必须配合content一起使用才有效果;*/

display: block; /*因为伪元素是个行内元素，而清除浮动必须用块级元素*/

clear: both; /*清除浮动的代码*/

visibility: hidden; /* 隐藏content中的内容部分*/

height: 0; /* 将content中的内容撑开的高度去掉*/

line-height: 0; /* 为了更好的浏览器兼容*/

}

.clearfix {

*zoom: 1; /* 为了解决ie6-7的兼容*/

}

双伪元素清除浮动

.clearfix::before,

.clearfix::after {

content: ''; /* 伪元素必须配合content一起使用才有效果*/

display: table;

}

.clearfix::after {

clear: both;

}

.clearfix {

*zoom: 1;

}

三种页面布局方式：

1.版心布局

2.通栏布局

3.分栏布局

1.定位

为什么要用定位：解决浮动和标准流布局无法完成的效果，快速布局

2.定位组成

1.偏移量

top: 定位元素距离参考的元素的顶部移动的距离

left: 定位元素距离参考元素左边移动的距离

bottom: 定位元素距离参考元素下边移动的距离

right: 定义元素距离参考元素右边移动的距离

2.定位模式

1.静态定位

HTML标准流中元素默认的定位方式

2.相对定位：position: relative;

特点：

1.相对定位的元素不脱标，占标准流中的位置

2.相对定位是参照自身原来的位置来移动

3.绝对定位：position: absolute;

特点： ******子绝父相*********

1.绝对定位的元素脱标，不占位置

2.改变元素的显示方式（针对行内元素）

3.元素有嵌套关系，如果子元素绝对定位，父辈元素都是静态定位，那么绝对定位的子元素参照浏览器移动位置；如果父辈元素中有非静态定位的元素，那么这个绝对定位的子元素参照这个非静态定位的父辈元素移动位置；如果父辈元素中有多个非静态定位的元素，那么这个绝对定位的子元素参照离自身最近的父辈元素移动位置（就近原则）

4.固定定位 position:fixed

特点：

1.固定定位的元素脱标，不占标准流中的位置

2.固定定位改变元素的显示方式（针对行内元素）

3.固定定位的元素始终都是参照浏览器来移动位置

5.定位盒子居中：left: 50%;（大盒子的一半） margin-left: -50px;（小盒子的一半）

6. 定位元素的层级关系 z-index （z-index: 2;）

1.层级只对非静态定位的元素有效

2.如果都是非静态定位的元素，后面的元素的层级比前面的元素的层级高

水平居中

 div {
 	width:200px;
 	margin:0 auto;
    } 复制代码

水平居中2

  div {
 	position: absolute;
 	width: 300px;
 	height: 300px;
 	margin: auto;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	background-color: pink;	/* 方便看效果 */
 }复制代码

水平垂直居中1

  div {
 	position: relative;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
 	background-color: pink;	 	/* 方便看效果 */

  }复制代码

水平垂直居中2

 div {
 	position: absolute;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background-color: pink;	 	/* 方便看效果 */

 }复制代码

水平垂直居中3

  .container {
 	display: flex;
 	align-items: center; 		/* 垂直居中 */
 	justify-content: center;	/* 水平居中 */

 }
 .container div {
 	width: 100px;
 	height: 100px;
 	background-color: pink;		/* 方便看效果 */
 }

水平垂直居中4

.box {
		width: 1280px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}

转载于:https://my.oschina.net/u/4155188/blog/3067148

chenting3375

关注

0
点赞
踩
0

收藏

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

css： 1.作用：设置元素样式，美化页面 2.css：层叠样式标签 3.css的语法：选择器 { 属性：属性值; } 4.css的三种书写方式 1.行内样式：写...
复制链接

扫一扫