👍厉害吧😎

CSS笔记

发表于 更新于 分类于

1,什么是CSS

CSS指的是层叠样式表，一种用来表现HTML或XML等文件样式的计算机语言，是可以做到网页和内容进行分离的样式语言。作用是：可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制；使页面的字体变得更漂亮，更容易编排。

2,选择器

1.xxx选择器

2.xxx选择器

3.xxx选择器

4.root根选择器

root选择器用于选择文档的根元素。根元素指的是位于文档树中最顶层结构的元素。在HTML中，根元素永远是HTML，更改全局

3,美化网页元素

3.1为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面主题

 <script` `src="js/index.js"` `type="text/javascript"></script>html

3.2字体样式

span标签：重点要突出的字，使用span套起来 （span可以换成别的名字，为了规范用span）

1
2
3
4
5
6
<style>
    #title1{
        font-size:50px
    }
</style>
<p><span id="title1">欢迎你</span></p>

本代码会将欢迎你改为50px的字体大小

font-family：想要的字体; 可以改变所选属性的字体

1
2
3
4
5
6
7
<style>
	body{font-family:楷体;}
</style>
<body>
	<p>嘿嘿</p>
	<h1>嘻嘻</h1>
</body>

本代码会将body标签里所有的字改为楷体

font-weight:粗细 可以改变字体粗细

粗细那可以填的： bold 粗的 colder更粗的 lighter更细的 normal正常的 数字 等等

font-size: px 改变字体大小（单位px像素 如20px）（单位em 1em = 16px）

color：颜色 改变字体颜色

还有这种办法 font：字体样式（如斜体） 粗细程度 大小 字体

1
2
3
4
5
6
<style>
	p{
		font:oblique bolder 20px "楷体";
	}
</style>
	<p>嘿嘿</p>

将p标签的字改为 倾斜 加粗 20px大小 楷体

3.3文本样式

1、颜色

分为 ; 单词(如red) RGB(0F) RGBA（在RGB基础上可以设置透明度01）

1
2
3
4
5
6
<style>
    h1{
        color:rgba(0,255,255,0.50)；
        text-align：center; 将文本居中
    }
</style>

以上代码将标签h1的文字颜色改为所选 透明度为0.5

2、文本对齐的方式

text-align : center; 将文本居中(见上方代码如何使用)

在代码中也可以用这些进行对其

&nbsp 半角的不断行的空白格（推荐使用）

&ensp 半角的空格

&emsp 全角的空格

3、首行缩进

text-indent: em 段落首行缩进建议用em作为单位 px是像素太小了

4、行高

1
2
3
4
5
6
<style>
    p{
	height: 300px;
	line-height: 10px;
    }
</style>

height: 300px; 设置本标签块的高度是300px（可以用background给本标签块设置个背景颜色方便看多大）
line-height: 10px; 2行字之间的间距为10px （可以用这个与字体的高度对其）

5、装饰

border-radius:10px; 讲背景边角变圆润

5.1 划线

​ text-decoration : underline; 给字体设置一个下划线

​ 将 underline改为line-through就是在文本添加一个中划线

​ 将 underline改为overline就是在文本添加一个上划线 none去掉划线

5.2 文本图片水平对其

vertical-align : middle;

6、文本阴影和超链接伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
	.a1{
		height: 125px;
		width: 125px;
	}
	.a3{
		text-decoration: none;
/*		去除下划线*/
		background: #9AC41A;
/*		设置背景颜色*/
		border-radius:10px;
/*		讲背景边角变圆润*/
		font-size: 25px;
/*		设置字体大小*/
		color: #3205FF;
		/*		设置字体颜色*/
	}
	a:hover{
		color: orange;
/*		鼠标悬浮到此处 将颜色改为orange*/
	}
	
	</style>

*小重点 超链接伪类

a:hover { color: orange; （后面可以添加属性如文字放大）}
鼠标悬浮到此处 将颜色改为orange

a:active { color: aqua; }
鼠标按住此处未释放时 将颜色改为aqua

a:visited { color:颜色；}
已经访问过的超链接将会运用这个属性 将颜色改为所选

a:link;{color:颜色；}
没有访问过的超链接会使用这个属性 将颜色改为所选

7.文本阴影

text-shadow: 颜色 水平偏移 垂直偏移 阴影半径

（貌似只支持纯文本）

无序列表前段圆圈：
list-style:
none 去掉圆点
circle 设置为空心圆
decimal 数字
square 正方形

3.4 table表格

1.0 关键词

table 表格元素
border边框元素
tr 定义表格一行
th 元素定义表头
td 元素定义表格单元
rowspan 行合并
colspan 列合并

3.5 cursor（鼠标样式）

关键字

auto 默认值，由浏览器根据当前上下文确定要显示的光标样式
default 默认光标 默认光标，不考虑上下文，通常是一个箭头
none 不显示光标
initial 将此属性设置为其默认值
inherit 从父元素基础 cursor 属性的值
context-menu 上下文菜单光标 表示上下文菜单可用
help 帮助光标 表示有帮助
pointer 指针光标 表示一个链接
progress 进度游标 进度指示器，表示程序正在执行一些处理，但是您仍然可以在该界面进行一些操作（与 wait 不同）
wait 等待光标 表示程序繁忙，您应该等待程序指向完成
cell 单元游标 表示可以选择一个单元格（或一组单元格）
crosshair 十字准线光标 一个简单的十字准线
text 文字游标 表示可以选择的文本
vertical-text 垂直文本光标 表示可以选择的垂直文本
alias 别名光标 表示要创建别名或快捷方式
copy 复制光标 表示可以复制某些内容
move 移动光标 表示可以移动鼠标下方的对象
no-drop 无丢游标 表示所拖动的项目不能放置在当前位置
not-allowed 不允许的游标 表示无法完成某事
all-scroll 全滚动光标 表示对象可以沿任何方向滚动（平移）
col-resize 彩色游标 表示可以水平调整列的大小
row-resize 行大小调整游标 表示可以垂直调整行的大小
n-resize N尺寸游标 表示对象的边缘可以向上（向北）移动
e-resize 电子调整游标 表示对象的边缘可以向右（向东）移动
s-resize S调整游标 表示对象的边缘可以向下（向南）移动
w-resize W尺寸游标 表示对象的边缘可以向左（向西）移动
ne-resize NE调整大小的游标 表示对象的边缘可以向上和向右（北/东）移动
nw-resize NW调整游标 表示对象的边缘可以向上和向左（北/西）移动
se-resize SE调整游标 表示对象的边缘可以向下和向右（向南/向东）移动
sw-resize SW调整游标 表示对象的边缘可以向下和向左（南/西）移动
ew-resize EW调整游标 表示可以双向调整对象大小的光标
ns-resize NS调整大小的游标
nesw-resize NESW调整大小的游标
nwse-resize NWSE调整大小的游标
zoom-in 放大光标 表示可以放大某些内容
zoom-out 缩小光标 表示可以缩小某些内容
grab 抓取光标 表示可以抓取（拖动）某些东西
grabbing 抓取光标 表示已经抓取到某些东西
url(“ “) **** 自定义光标的样式，括号中的内容为光标图像的源文件路径