CSS总结

最新推荐文章于 2024-03-31 16:50:38 发布

王_子涵

最新推荐文章于 2024-03-31 16:50:38 发布

阅读量1.1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_41027007/article/details/100139813

版权

一、css简介

1、CSS的定义：层叠样式表。属性和属性值用冒号分隔开，以分号结尾。

2、CSS的引入方式：

内联式Inline（行内样式）：<div style="这里写样式">我是一个块级的标签</div>
嵌入式（内页样式）：将CSS样式表放到head中用<style>标签包裹起来

导入式：将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。导入式会在整个网页装载完后再装载CSS文件。

@import "My.css"; 此处注意.css文件的路径

</style>

外联式Linking（外部样式、链接式引入）：将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。链接式会以网页文件主体装载前装载CSS文件。

3、样式优先级：

!important >行内样式>内嵌样式> 外联式（链接式引入）>导入样式

4、CSS语法由三部分构成：选择器、属性和值： selector {property: value}

5、使用CSS的优势：内容与表现分离，也可以减少网页的代码量，增加网页的浏览速度。

二、选择器

基本选择器：

1、通用元素选择器：* 表示应用到所有的标签。

*{margin：0；padding：0；}

2、标签选择器：匹配所有使用 div 标签的元素（可以匹配所有标签）

div {color: yellow}

3、类选择器：匹配所有class属性的元素。语法：.类名{样式}

.yanse{color:yellow}

<div class="yanse"/>我的div</div>

4、id选择器：通过id属性调用样式，网页中id的值都是唯一的。语法：#ID名{样式}

#Mycolor {color: yellow}

组合选择器：

1、多元素组合选择器：同时匹配两个或多个标签，用逗号隔开

p，div{color: yellow;}

2、后代元素选择器：匹配所有div标签里嵌套的P标签，之间用空格分隔。

div p {color: yellow;}

<div>

<p>pppppp</p>

<div><p>pppppp</p></div>

</div>

3、子代元素选择器：匹配所有div标签里嵌套的子P标签，之间用>分隔。

div > p {color: yellow;}

<div>

</div>

4、相邻兄弟选择器：用加号（+）分隔

相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。

例：所有<div> 元素后的第一个 <p> 元素

div+p { background-color:yellow;}

5、普通兄弟选择器：用波浪号（~）分隔

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

例：所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p { background-color:yellow;}

属性选择器：

CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素

注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

属性选择器例：把包含标题（title）的所有元素变为蓝色：

[title]

{ color:blue; }

属性和值选择器例：

[title=w3cschool]

{ border:5px solid green; }

属性和值的选择器 - 多值:

下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值（只要title的属性值中有且只能为“hello”的值，都将被选中）:

[title~=hello] { color:blue; }

下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值（该值是整个单词，无论是单独像lang="en"，或者像连字符(-)连接的如lang ="en-us"都可以）:

[lang|=en] { color:blue; }

表单样式：

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

}

伪类/伪元素：

1.伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素，

伪类状态： link、hover、active、visited

a:link（未访问的链接）,用于定义了常规的链接状态。
a:hover（鼠标划过链接）,用于产生视觉效果。
a:active（已选中的链接）。
a:visited（已访问的链接）,可以看出已经访问过的链接。

2.伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，但是他们并不存在与dom结构中。CSS3中建议使用::表示伪元素

伪元素： before、after

p:before 在每个<p>元素的内容之前插入内容;
p:after 在每个<p>元素的内容之后插入内容。

所有CSS伪类/元素

三、常用属性

1. 颜色属性

color

HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：

transparent

全透明，使用方式：color: transparent

opacity

元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。

2. 字体属性

font-style: 用于规定斜体文本

normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示

font-weight: 设置文本的粗细

normal（默认）
bold（加粗）
bolder（相当于<strong>和<b>标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）

font-size: 设置字体的大小

默认值：medium
<absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger

font-family：字体名称

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

font：简写属性

语法：font：字体大小/行高字体;（字体要在最后）

3. 文本属性

color：设置文本的颜色

white-space: 设置元素中空白的处理方式

normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

ltr 默认，文本方向从左到右。
rtl 文本方向从右到左。

text-align: 文本的水平对齐方式

left
center
right

line-height: 文本行高

vertical-align: 文本所在行高的垂直对齐方式

baseline 默认
sub 垂直对齐文本的下标，和<sub>标签一样的效果
super 垂直对齐文本的上标，和<sup>标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本首行缩进

letter-spacing: 添加字母之间的空白，设置字符之间的间距

word-spacing: 添加每个单词之间的空白

text-transform: 属性控制文本的大小写

capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。

text-overflow: 文本溢出样式

clip 修剪文本。
ellipsis 显示省略符号...来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本

text-decoration: 文本的装饰

none 默认。
underline 下划线。
overline 上划线。
line-through 中线。

text-shadow：文本阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
text-shadow: 5px 5px 5px #888;

word-wrap：自动换行

word-wrap: break-word;

unicode-bidi：unicode-bidi 属性与direction属性一起使用，来设置或返回文本是否被重写

normal 默认
embed 创建一个附加的嵌入层面
bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
unicode-bidi: normal|embed|bidi-override|initial|inherit;

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property）：限制在一个块元素显示的文本的行数。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

4. 背景属性

background-color: 背景颜色

background-image 设置图像为背景

url("http://images.cnblogs.com/cnblogs_com/o_ns.png"); 图片地址

background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-position 设置背景图像的位置坐标

background-position: center center; 图片置中，x轴center，y轴center
1px -195px 截取图片某部分，分别代表坐标x，y轴

background-repeat 设置背景图像不重复平铺

- no-repeat 设置图像不重复，常用
- round 自动缩放直到适应并填充满整个容器
- space 以相同的间距平铺且填充满整个容器

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. 列表属性

list-style-type: 列表项标志的类型

none 去除标志
decimal-leading-zero; 02.
square; 方框
circle; 空心圆
upper-alph; & disc; 实心圆

list-style-image：将图象设置为列表项标志

list-style-position：列表项标志的位置

inside
outside

list-style：缩写

6.CSS 链接(link)

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

:link 选择器选择未访问的链接，向未访问的链接添加特殊的样式。

:link 是一个伪类，它适用于到另一个未被访问的资源的超链接。

:link 适用于未访问的URL的链接。未访问的URL是链接点不会显示在用户代理的历史记录中的URL。

此状态与 :visited 状态互斥。

link 选择器对已经访问的链接没有样式。

7.表格

HTML 表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗）

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

border 表格边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
width和height属性定义表格的宽度和高度。
text-align属性设置水平对齐方式，
vertical-align设置垂直对齐方式。

四、页面布局

1. 边框

border-style：边框样式

solid 默认，实线
double 双线
dotted 点状线条
dashed 虚线

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

1个参数：四个角都应用
2个参数：参数一左上、右下；参数二左下、右上
3个参数：参数一左上；参数二左下、右上；参数三应用于右下
4个参数：左上、右上、右下、左下（顺时针）

border: 简写

border: 2px yellow solid;

box-shadow：边框阴影

参数一左右
参数二上下
参数三虚化效果
参数四颜色
box-shadow: 10px 10px 5px #888

border-bottom:设置下边框

border-bottom-left-radius：添加左下角圆角

border-bottom-right-radius：添加右下角圆角

2、盒子模型：

CSS 盒子模型又称框模型 (Box Model) ，一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距，padding:用于控制内容与边框之间的距离;
border：边框。
margin：外边距，用于控制元素与元素之间的距离;

标准盒子模型和IE盒子模型

3. display

none 不显示。
block 显示为块级元素。
inline 显示为内联元素。
inline-block 行内块元素（会保持块元素的高宽）。
list-item 显示为列表元素。

display:none 隐藏的元素不会占用任何空间，该元素原本占用的空间也会从页面布局中消失。

4. visibility

visible 元素可见
hidden 元素不可见
collapse 当在表格元素中使用时，此值可删除一行或一列，不影响表格的布局。

visibility:hidden 隐藏的元素仍占用与未隐藏之前一样的空间，仍然会影响布局。

5. float 浮动

让一行显示两个或多个块级标签，会脱离文档流；如果浮动起来的标签的父级标签没有内容；那么父标签将消失。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

none
left 左浮动
right 右浮动

clear 清除浮动：

none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象

6. clip 剪裁图像

rect 剪裁定位元素：

auto 默认值，无剪切
上-右-下-左（顺时针）的顺序提供四个偏移值
区域外的部分是透明的
必须指定 position:absolute;
例：clip:rect(0px,60px,200px,0px);

7. overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

8 outline 边框轮廓

outline-width 轮廓宽度
outline-color 轮廓颜色
outline-style 轮廓样式

9. zoom 缩放比例

10. cursor 鼠标的类型形状

pointer 一只手
wait 程序正忙 (一只表)
help 一个问号

11. transform、transition 动画效果

transform 转换，变形

origin 定义旋转基点（left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。
rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。
skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。
scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。
translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动

Transition 平滑过渡

transition-property：变换的属性（none(没有属性改变)、all(所有属性改变)、具体属性）
transition-duration：变换持续时间
transition-timing-function：变换的速率（ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））
transition-delay：变换延迟时间
transition：缩写

动画 https://www.cnblogs.com/moumou0213/p/7205092.html

https://blog.csdn.net/u014607184/article/details/51801393

12.margin外边距

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的。

该属性可以有1到4个值。

margin:10px 5px 15px 20px; 上右下左

margin:10px 5px 15px; 上左右下

margin:10px 5px; 上下左右

margin:10px; 四边

13.padding内边距

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

提示：CSS padding 属性可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值。

该属性可以有1到4个值。

padding:10px 5px 15px 20px; 上右下左

padding:10px 5px 15px; 上左右下

padding:10px 5px; 上下左右

padding:10px; 四边

14.css媒体查询

准备工作1：设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置no，我们不希望用户放大缩小页面）

准备工作2：加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。

@media 可以针对不同的屏幕尺寸设置不同的样式， @media的两种工作方式：

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

(1)一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

解释：当屏幕的宽度大于等于400px的时候，应用styleA.css

解释：当屏幕的宽度大于600小于800时，应用styleB.css

(2)另一种方式，即是直接写在 max-width最大宽度 min-width最小宽度

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ .class { background: #ccc; } }

多个媒体特性使用

@media screen and (min-width:600px) and (max-width:900px){ /*屏幕在600px~900px*/ body {background-color:#f5f5f5;} }

设备屏幕的输出宽度Device Width

@media screen and (max-device-width:480px) {样式代码}

not关键词，使用关键词“not”是用来排除某种制定的媒体类型，

@media not print and (max-width: 1200px) {样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

only关键词：only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

@media all and (min-width:xxx) and (max-width:xxx){

/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/

}

@media only screen and (min-width:xxx) and (max-width:xxx){

/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/

}

五、css居中

1、水平居中

(1)把margin设为auto，且对浮动元素或绝对定位元素无效。

(2)text-align:center，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。

2、垂直居中

(1)使用line-height让单行的文字垂直居中，把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

https://www.cnblogs.com/2050/p/3392803.html

3、表格居中

对表格内容水平居中：text-align:center;

垂直居中：vertical-align:middle;

4、使用绝对定位来进行居中

第一种：

父级

{

position: relative;

width: 200px;

height: 200px;

}

子级

{

position: absolute;

width: 100px;

height: 100px;

background: #ccc;

left: 50%;

top: 50%;

margin-left: -50px;

margin-top: -50px;

}

第二种

父级

{

position: relative;

width: 200px;

height: 200px;

}

子级

{

position: absolute;

width: 100px;

height: 100px;

background: #ccc;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

}

5、浮动水平居中

浮动居中的原理：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。

这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。

父级

{

width: 200px;

height: 200px;

border: 1px solid #000;

}

子级浮动元素，left: 50%，多出了自身一半的宽度

{

position: relative;

float: left;

left: 50%;

clear: both;

}

子级的子级

{

border: 1px solid blue;

position: relative;

left: -50%;

}

六、Sass

sass的用法：可重用的代码块，称为mixin。可通过@include，@extend调用

七、sass与less的区别

sass用$

less用@

sass动态样式语言，Sass语法属于缩排语法

sass的语法 @mixin，可重用的代码块，称为mixin：可通过@include，@extend调用

@extend通过继承去简化代码，

@mixin 加名称就可以定义一个Mixins模块，通过@include来调用具有相同名称的mixin模块。

用%声明，@extend调用必须把%带上

例子：

@mixin .page{ //@mixin声明

color:#f00;

}

.webpage{ //@include调用

@include page();

}

使用@mixin，无参数，有参数和带默认值参数， @mixin opa($opa:50){ //带参数,默认50 多个参数用逗号隔开 opacity: $opa / 100; filter:alpha(opacity=$opa); }

//mixin需要在调用之前声明如果@mixin声明包含参数,则@include调用也必须传参,否则会报错 .demo{ @include opa(10) }

sass编译后:

.demo {

opacity: 0.1;

filter: alpha(opacity=10);

}

@mixin box-shadows($shadow...) {//参数不确定 @mixin声明

box-shadow: $shadow;

}

$shadows: 0px 1px 2px #333, 2px 3px 4px #ccc;

.container {

@include box-shadows($shadows...);

}

sass支持条件判断

@if $haha == true {

margin-right:10px;

margin-top:10px;

} @else{

margin:0px;

}

/* Sass中简单的for循环语句*/ @for $i from 1px to 10px { .border-#{i} { border: $i solid blue; } }

判断兼容 *代表是专给ie6/7写的

$lte7:true !default;//是否兼容ie6,7

@mixin inline-block {

display: inline-block;

@if $lte7 { *display: inline; *zoom:1; }

}

八、CSS魔法与布局

1、让背景图片变成黑色： filter: grayscale(100%);

2、自定义输入框光标的颜色：input, textarea { caret-color: blue; }

3、禁用文本选中

body { user-select: none; // 页面中的文本不能被选中 }

4、流光效果：鼠标 hover 出现一道流光划过的效果

</div>

.img-light {

position: relative;

width: 640px;

height: 384px;

}

.img-light::after {

content: "";

height: 100%;

width: 100px;

transform: skewX(-25deg) translateZ(0);

background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3) 50%, hsla(0, 0%, 100%, 0));

position: absolute;

left: -150%;

top: 0;

z-index: 2;

}

.img-light:hover::after {

transition: left 2s ease-in-out;

left: 150%;

}

王_子涵

关注

0
点赞
踩
2

收藏

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

一、css简介1、CSS的定义：层叠样式表。属性和属性值用冒号分隔开，以分号结尾。2、CSS的引入方式：内联式Inline（行内样式）：<div style="这里写样式">我是一个块级的标签</div> 嵌入式（内页样式）：将CSS样式表放到head中用<style>标签包裹起来<styletype="text/css">...此...
复制链接

扫一扫