什么是CSS（层叠样式表）

概念和使用方式

1、什么是CSS?

    设置文字样式、背景、位置、动画等等。

2、如何在HTML中引入？

行内样式–直接在标签中添加style属性；

如：<p style="color: pink;">段落</p>

内联样式–直接将css内容写入我们<style></style>标签之中，<style></style>标签一般放置在<head></head>结束标记之前。
如：

<head><style>p{color: pink;}</style>
</head>

3、外部样式表

从外面的.css文件中引入css文件，一般使用link标签，link标签写在<head></head>的结束之前
如：<link rel="stylesheet" href="index.css">

4、在css中利用@import引入，但是推荐不用

选择器

1、什么是选择器？

选中某一个标签，方便进行标签的样式设计

2、基本选择器：

标签选择器就是标签的名字，代表选中的所有标签。
id选择器，利用id=“id名” 在当前文件中id是唯一的。在style，css文件中，利用#id 名来定义样式
class选择器，利用class="class"名，只要名字一样就可以利用class定义统一的样式。在style，css文件中，利用.class 名来定义样式

写所有样式之前，一定要将浏览器默认的样式删除–主要是解决各大浏览器之间各个标签默认内外间距不等的原因

*{margin: 0;padding: 0;
}

text-indent: 32px; 段落的首行缩进；

网页中默认字体大小为16像素一个字，首行缩进就是32px；

单位

px：像素
%：百分比，相对于父级元素的大小
em：相对单位，相对于父级元素的字体大小；

例子：css属性

font-style:italic;设置字体的斜体；
text-decoration:underline;字体修饰为下划线；
font-family:“Times New Romain”,Times,serif;
word-spacing:20px;字间距(单词之间的间距）
letter-spacing:20px;每个字,每个字母之间的间距都在发生变化(字间距）
字体设置：如果是多个单词组成的字体，则需要加引号；如果是单个单词的字体，就不需要加引号，如果是中文字体，则必须加引号，建议设置字体的时候，多设置几个，每个字体之间用逗号，隔开，以便于电；脑上有这种字体。

1、文字水平对齐：

text-align: left|right|center|justify;

2、单行文本垂直居中

只需要保证：line-height=height

3、垂直对齐方式

vertical-align:middle(一般要对图片设置这个，文字图片对齐用这个属性设置）

CSS复合选择器

类选择器与ID选择器的区别

ID选择器是有且只能有一个
类选择器可以有多个

写法：

1、div标签下的p标签的样式

子代选择器（利用>（小于符合）选择下一级选择器）

div>p{color:red
}

2、后代选择器（利用（空格符合）选择下一级选择器）

div p{color:red
}

3、交集：

p标签下，且同时设置了类选择器class=“”的（利用.(点)分隔标签选择器和类选择权，表示不但要是标签选择器，也还要同时设置了类选择器）

标签选择器.类选择器{color:red;
}

4、并集:

span标签和a标签同时设置样式（利用,(逗号)分隔）

span,a{color:red;
}

5、复合选择器（优先级）权重值

!importtant(直接在所想要最高级显示的属性后面加上）：但是不提倡使用
如：

span,a{color:red !importtant;
}

6、伪类选择器：比如a标签的四种状态（伪类选择器）

a:link 没有点击之前的属性
a:visited 点击过后的属性
a:hover 鼠标悬停时
a:active 鼠标按住时激活
7、通用选择器

*｛
属性:值;
……
｝
CSS选择器的优先级：
行内选择器>内部选择器>ID选择器
ID选择器100>类选择器10>标签选择器1（权重值）

默认情况下，所有背景都为透明的。

background-color：背景颜色
background-image:背景图片
background-image:url() no-repeat center；
background-repeat：no-repeat;图片不重复；
background-position:center;图片居中
background-size：800px 300px ;背景图片的大小，宽度加高度一个也是代表宽高
background-size：contain/cover；contain=100%,vaver超出去的会被删除，所以可以用
background: url(img/01_Home_07.jpg) no-repeat center;
background-size: cover;cover设置背景图片；
background-attachment:fixed;背景图片固定；
视差滚动：

:nth-child(){}表示选中第几个元素,如：

p:nth-child(1){background：url(a.png) no-repeat center;
｝

颜色值：包含 rgb 十六进制颜色单词 rgba(a:为透明度0~1之间的小数）

一些常见的css属性

overflow:hidden;超出父元素区域则隐藏，设置隐藏；
text-align:right;不仅仅可以作用于我们的文字，还可以对图片，只要是区域里的内容，都可以起到效果。
border-top: 上右下左 transparent；透明
.pra2 img:nth-child(odd,even){}；意思是选中img所在父元素的第二个元素为img的元素。
其中的odd是奇数，even是偶数；表示隔行效果
.pra2 img:nth-of-type(){2n,2n+1}；选中父元素下的第二个img元素，与上面一个有差别。
其中的2n是偶数，2n+1表示单数
也可以 3n 4n 表示3，4的倍数
border-collapse:collapse;折叠边框；
cursor: pointer；设置鼠标为手型

1、css语法格式：

class ID 命名：字母数字，下划线（_），连字符（-）

取名应该语义化（nav、menu）

多行注释：/* */

选择器｛属性：属性值；属性：属性值；
｝

2、css属性继承

有些设置在父元素中的属性，厚袋子元素也该拥有该属性color font-size line-height
有些设置在父元素上的属性，后代子元素没有该属性
width，height，border，background

文档流

1.1普通文档流

块级标签默认独占一行，从上往下排列，可以设置宽高
内联标签标签无法设置宽高，大小从内容撑开，默认从左往右排列

1.2浮动

作用：浮动能让我们的元素在父元素的左上角排列，直到出现另外的浮动或者另外的边界才会打乱其浮动，向左或者向右排列，如果当前一行排不下是则换行。
写法：float:left||right;
影响：1、元素浮动之后，会脱离文档流，不再占据文档流的位置，所以会产生以下遮盖文档流的效果
2、对浮动元素之后的文档流元素产品影响，对浮动元素之前的文档流内容元素不产生影响。

3、子元素浮动之后，父元素的高度崩塌，就失去的浮动的子元素的高度，就相当于父元素里的文档流中没有浮动的子元素的文档高度。

4、若没有对浮动元素设置宽高，则浮动元素的宽高变为内容的宽高；

5、如果内联标签span设置了浮动，则可以设置宽高，默认是不能的。

1.3清除浮动
clear:left||right||both;

1.4清除浮动对父元素的影响

给父元素设置高度；（在确定知道高度的情况下适用）
在浮动元素之后添加一个同级的新标签，空标签，设置我们的clear:both；可以解决问题（但是不推荐该方法）
给父元素设置浮动；
父元素设置overflow:hidden;超出隐藏或者 overflow:auto;（在不考虑ie按兼容的情况下以及确保我们内容不会超出时使用。）
overflow: hidden:超出隐藏 auto：超出出现滚动条 scroll:无论超出都会出现滚动条；

5、结合伪元素：[hover(伪类选择器）]:before:after(最好解决方案）

.clearfix:before,.clearfix:after{display:table; /*将标签类型更改为表格类型*/content:'';/*伪元素的内容*/
}
.clearfix:after{clear:both;
}

解决浮动的固定模式；class一一对应；

display:inline;

阴影text-shadow:0 0 5px #fff;x轴偏移，y轴偏移，模糊值，阴影颜色；

1、盒模型分类

标准盒模型（W3C）
现代浏览器采用的默认盒模型-IE盒模型（特别）

2、标准盒模型组成

2.1内容（content）width*height

2.1内边距(padding)

    与background的颜色一样；包裹在内容的外面，是内容与border之间的间隙与距离。同样可以设置大小。写法：padding:10px;代表四个方向，上下左右padding:20px 10px;代表上下20px，左右10px；padding:10px 20px 30px;代表，上10，左右20，下30pxpadding:10px 10px 10px 10px;代表，上右下左，其中border和margin同理还可以写为padding-left，padding-right，padding-top；padding-bottom；分别代表一个方向的内边距

2.3边框（border）-- 可以设置大小与颜色，

2.4外边距（margin）-- 透明区域，元素与元素之间的距离，即使大小为0，margin也同样存在

3、结论（盒子的实际大小）

内容大小（width、height）+padding*2+border*2+margin*2

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

例：css属性

text-indent:字符缩进；
overflow:hidden;取消浮动的影响；
outline:none;外轮廓设置为none；去掉input标签的默认边框样式。点击时
border-style:dotted|solid;小圆点，实线
利用outline:none；去掉默认点击或者不点击样式利用伪类选择器(鼠标点击应用时的css样式)
.btn:active{
background:blue;
color:red;
}

定位

position:absolute||relative;

absolute:绝对定位
relative:相对定位

absolute:绝对定位

水平方向通过left或者right进行控制；
垂直方向通过top或者bottom来进行控制；
垂直方向通过top或者bottom来进行控制；
设置了绝对定位的元素脱离了文档流，相当于父元素中没有这个元素，相对于父元素的进行定位
默认情况下是相对于body进行绝对定位；
如果定位元素的父级元素（祖先级元素）有相对定位，position:relative；则相对于该元素；
relative:相对定位
水平方向通过left或者right进行控制；
垂直方向通过top或者bottom来进行控制；
相对定位的元素是相对于自己原来的位置，本来的位置，如果其他元素移动会影响本来位置，就影响了相对元素（不会脱离文档流）
不会脱离文档流

总结：要使用绝对定位必须对父元素设置相对定位；

fixed:固定定位，相对于浏览器窗口固定的，脱离文档流。

记住：

定位的position>float
可以利用z-index：0|1|-1；来控制层级关系
定位元素的层级关系；利用z-index;但是z-index对于浮动元素float没有用；
可用于对position定位元素来设置。

生效的对象：

只有设置了定位的元素才可以使用。（relative，absolute，fixed）
如两个元素重合时，在垂直方向会对两个设置了margin相邻的一边选择最大值，不会两个都出现

补充：margin的问题

在垂直方向上，两个元素的margin相遇后，会取最大值

如果子元素和父元素之间没有内容，则元素设置的margin-top会作用在父元素身上。

解决方法

给父元素设置border（边框）
给父元素设置padding
给父元素设置浮动（其中还要给父元素或者子元素设置宽度）
给父元素设置overflow:hidden;（子元素超出以后会隐藏）–推荐使用

什么是CSS（层叠样式表）相关推荐

css层叠样式表（一）
今天研究了下css.这东东入门不算难.可是想写出好的样式就得有很深的功底了.按照老大给网址,12天学会网页设计.做下总结吧.css通过div(层)来定位,通过层的margin,padding,bord ...
第四章css总结,第四章CSS层叠样式表分析.doc
第四章CSS层叠样式表分析第章CSS层叠样式表CSS的" " color=" ">这样的标签以及与标签搭配的显示属性(如"background ...
css:层叠样式表(全)
css:层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,解决了内容与表现分离的问题,通常存储在css文件中. 目录: css属性,继承,引用等选择器盒模 ...
css层叠样式表——css基础介绍
css层叠样式表第一天 css层叠样式表01 css层叠样式表第一天 css介绍 css语法 html标签全局属性引入css样式的方式知识点应用 css介绍 css是Cascading Style ...
css层叠样式表、基本选择器
文章目录系列文章目录前言一.css层叠样式表 1.css组成 2.css引入方式 3.文字样式 4.文本属性二.选择器 1.基本选择器 2.最高样式引入 3.伪链接选择器 4.伪结构选择器 5 ...
Css3学习日志 --css层叠样式表
学习目标: 掌握css层叠样式表基础教程 CSS语法.选择器.字体样式.边框.背景.图片格式详解学习内容: css样式规则基本语法: A{属性:值; 属性:值; } 1.选择器用于指定css样式作 ...
CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
4.CSS层叠样式表一
CSS层叠样式表目标能够说出什么是CSS 能够使用CSS基础选择器能够设置字体样式能够设置文本样式能够说出CSS的三种引入方式能够使用Chrome调试工具调试样式 1.CSS简介 CSS: ...
javascript css(层叠样式表)
css层叠样式表(用来装饰网页界面) js代码操作css css代码目录 css层叠样式表(用来装饰网页界面) js代码操作css css代码在style(样式)里面进行操作案例在style(样 ...
HTML之CSS层叠样式表
一.CSS层叠样式表概述 CSS :层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件 ...

什么是CSS（层叠样式表）

什么是CSS（层叠样式表）相关推荐

最新文章

热门文章