前端的CSS速记

最新推荐文章于 2023-07-17 12:02:56 发布

天空飘来五行码

最新推荐文章于 2023-07-17 12:02:56 发布

阅读量437

点赞数

分类专栏： WEB相关

本文链接：https://blog.csdn.net/qq_38827988/article/details/89331492

版权

WEB相关专栏收录该内容

40 篇文章 0 订阅

订阅专栏

1.背景

1.1background-color:

body {background-color:#b0c4de;}

1.2background-image:

body {background-image:url('bgdesert.jpg');}

1.3background-repeat:

水平平铺:background-repeat:repeat-x;

垂直平铺:background-repeat:repeat-y;

不平铺:background-repeat:no-repeat;

1.4background-position :

定位:background-position:right top;

1.5background-attachment:

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

scroll:滚动 fixed:固定 inherit:父元素继承

1.6简写

body {background:#ffffff url('img_tree.png') no-repeat right top;}

2.文本

2.1颜色

color

2.2对齐方式

text-align:

2.3文本方向

direction :ltr(left to right),rtl,inherit

2.4文本修饰

记住这个主要用来删除链接的下划线的

text-decoration:none

2.5文本转换

text-transform:uppercase;全大写

text-transform:lowercase;全小写

text-transform:capitalize;首字母大写

2.6文本缩进

text-indent:50px;文本首行缩进

2.7字间距

word-spacing:10px;设置单词间隔

3.字体

3.1字体大小

3.1.1设置字体大小像素

font-size:40px;

3.1.2用em来设置字体大小(em：px/16=em)

font-size:2.5em;

1em=当前字体大小,但在ie浏览器会出问题

3.1.3使用百分比和EM组合

body设百分比,其下使用em

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

4.链接

4.1链接状态:

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

记住四个状态,并知道如何删除下划线,灵活运用背景颜色与文字颜色,可以弄出框型链接

5.列表

5.1列表项标记

5.1.1自带列表项标记

list-style-type: circle;

list-style-type: square;

5.1.2图像列表项标记

list-style-image: url('sqpurple.gif');

6.表格

6.1表格边框

border: 1px solid black;

注意,其他的元素也可以使用,当你不知道你的页面某个元素在页面是怎么显示时,可以通过上面的语句来显示元素的范围

6.2折叠边框

border-collapse: collapse;

6.3表格文字对齐

文本对齐:text-align

垂直对齐:vertical-align:bottom;

6.4表格填充

padding:15px;

7.盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像

实际占据的宽度=左外边距+右外边距+左边框+右边框+左内边距+右内边距+内容宽度

当你打开F12时,会看到盒子模型

8.边框

8.1边框样式border-style

none,dotted(点线),dashed(虚线),solid(实线),double(双边框),groove(3D沟槽),ridge(3D脊),inset(3D嵌入),outset(3D突出)

8.2边框宽度

border-width

8.3边框颜色

border-color

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

9.轮廓

outline:所有

outline-color:颜色

outline-style:样式

outline-width:宽

10.Display与Visibility

10.1隐藏元素 - display:none或visibility:hidden

display隐藏后,隐藏的元素将不占空间,而visibility还是占据空间

11.Position(定位)

11.1static

没有定位,是HTML元素的默认值

11.2fixed

元素位置相对于浏览器是固定的.

例如,回到顶部的按钮

不占据空间

11.3relative

相对与正常位置,就是在正常位置的基础上移动

11.4absolute

绝对位置,相对于最近的父元素,不占据空间

11.5sticky

粘性定位.基于用户的滚动位置来定位

跨越阈值之前为相对定位,其后为固定定位.特定阈值指top,bottom,right,left之一.因此必须设置一个阈值才能生效

12.光标cursor

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>