前端之CSS基础总结一

最新推荐文章于 2023-08-18 20:40:23 发布

阳光&girl

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量180

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/Sunny_tx/article/details/105467686

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML标签属性网页的内容和样式
HTML 网页的内容
CSS 内容的样式

CSS概述

1、CSS:Cascading Style Sheets 层叠样式表
2、优点：内容和样式相分离，便于修改样式

CSS语法

1、CSS选择器，大括号
2、样式格式：属性名：属性值;（例如：font-size:12px;）
3、注释：/* 注释内容 */
4、规范：每一条样式声明语句都以分号结尾，并且每一条声明语句都单独一行

CSS添加方法

1、行内样式：
将样式的属性名和属性值直接添加到当前需要添加样式的元素的标签内部。例如：<p style="color:red;font-size:12px">我爱你中国</p>
2、内嵌(内联)样式：
(1) <head></head>标签内部添加<style></style>标签，然后在<style></style>标签里面添加样式，例如：

<style>
	p{
		color:red;
		font-size:16px;
	}
</style>

(2)注意：

即使有公共css代码，也是每个页面都要定义的
适合文件很少，css代码也不多的情况
如果一个网站有很多页面，如果样式写在html文件里面，会导致每个文件都会变大，后期维护难度也很大

3、外联样式（单独文件）：
（1）css样式写在单独的文件中，该文件以.css结尾，该文件中定义样式
（2) 在html中的<head></head>标签内引入外联样式文件，引入方式：
<link rel="stylesheet" href="外联样式文件的路径"> rel属性表示引入文件的类型，此处表示样式文件，href属性表示路径，路径最好是相对路径
（3）sublime中快捷方式：link:css
（4）优点：

页面结构HTML代码与样式CSS代码的完全分离
维护方便
如果需要改变网站风格，只需要修改公共CSS文件
可以在同一个HTML文档内部引用多个外部样式表

4、样式优先级：

多重样式可以层叠，可以覆盖
样式的优先级按照“就近原则”
行内样式>内嵌样式>链接样式>浏览器默认样式

CSS选择器

1、选择器类型
（1）标签选择器：以标签的名字命名，例如：

body{
	backgroud-color:green;
}
h1{
	font-family:"宋体";
}
p{
	font-size:12px;
}
hr{
}

2、类别选择器：以点号.加上class属性值命名，例如：
HTML部分代码：

<body>
	<p>普通段落中的文字</p>
	<p class="one">类别1</p>
	<p class="one">类别1</p>
	<p class="two">类别2</p>
	<p class="two">类别2</p>
</body>

css部分代码：

<style>
	p{
		font-size:20px;
	}
	.one{
		font-size:12px;
	}
	.two{
		font-siez:16px;
	}
</style>

（3）ID选择器：以点号#加上id属性值命名，例如：

<body>
	<p>普通段落中的文字</p>
	<p id="one">类别1</p>
	<p id="two">类别2</p>
</body>

css部分代码：

<style>
	p{
		font-size:20px;
	}
	#one{
		font-size:12px;
	}
	#two{
		font-siez:16px;
	}
</style>

注意：id的属性值是唯一的，即整个html文件中只出现一次，而class属性值是不唯一的，即整个html文件中可以重复出现多次，可以作用于多个网页元素上面，方便设置相同的样式。
2、选择器的叠加用法：
（1）嵌套声明：

p span{
	color:red;
}

表示p标签内部的span标签的样式设置，则不会影响其他标签内部的span标签的样式
（2）集体声明：用逗号隔开

h1,p{
	text-align:center;
}
.one,.two{
	background-color:red;
}

（3）全局声明:*命名，针对所有的元素

*{
	text-align:center;
}

3、类别类型和id样式的混合
（1）多个class选择器混用，用空格分开

<div class="one yellow left">...</div>

（2）id和class混用

<div id="my" class="one yellow left">

注意：id选择器不可以多个同时使用

CSS样式

一、文本与文字样式
1、单位与颜色
（1）单位

px 像素（最常见的）
em 字符类型的单位，自适应用户所使用的字体 1em----表示1个字符
% 百分比:HTML DOM树的继承关系
（2）颜色
red,blue... 颜色名（W3C里面）
rgb(x,x,x) RGB值，三种基本颜色（红绿蓝）混合而成，每个颜色分量取值0-255，全部为0是黑色，全部为255是白色，其他时候三个值相等则为灰色
rgb(x%,x%,x%)RGB百分比值 0%-100% ，红色（100%，0%，0%）
rgba(x,x,x,x) RGB值，透明度；a值：0.0（完全透明）与1.0（完全不透明），0.0-1.0之间为半透明
#rrggbb十六进制，红色：#ff0000或者#f00

2、text样式

属性	描述	取值
color	文本颜色	red #f00 rgb(255,0,0)
letter-spacing	字符间距	2px，-3px
line-height	行高	14px(垂直居中)，1.5em ，120%
text-align	对齐	center(水平居中)，left，right，justify
text-decoration	装饰线	none，overline，underline，line-through
text-indent	首行缩进	2em(首行缩进两个字符)

3、font样式

属性	描述	举例
font	在一个声明中设置所有的字体属性	font: italic bold 16px/1.5em ‘宋体’（一般顺序：斜体粗体字号/行高字体）
font-family	字体系列	font-family:“Microsoft YaHei”,sans-serif (当字体中带有空格则需要用双引号括起来，如果没有则可以不用双引号,多个字体用逗号隔开)
font-size	字号	14px 120%
font-style	斜体	italic
font-weight	粗体	bold

4、背景样式
background-color
background-image:url(“图片路径+文件名”)
background-repeat:repeat,repeat-x（只有横向重复）,repeat-y,no-repeat(表示不重复)
background:颜色图片 repeat
注意：

当同时设置了背景图片和背景颜色则背景图片起作用，如果背景图片加载不出来则显示背景颜色
空元素（只有标签，标签里面没有内容）要设置背景样式，则必须先定义元素的宽度和高度

5、超链接样式
（1）链接的四种状态（:伪类选择器）

a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方悬停
a:active 链接被点击的时刻

（2）四种状态的顺序：
a:hover 必须位于a:link 和a:visited之后
a:active 必须位于a:hover之后
常用顺序巧妙记忆：Love&Hate

6、列表样式
无序列表ul和有序列表ol共用样式

属性	描述	取值
list-style	所有用于列表的属性设置于一个声明中
list-style-image	为列表项标志设置图像	url(“图片路径+文件名”)函数
list-style-position	标志的位置	inside:样式向右缩进到列表区域之内outside（默认值）:突出在列表的左侧
list-style-type	标志的类型	none(无标号),disc(默认值，实心圆)，circle（空心圆）,decimal(数字),lower-roman小写罗马数字…

7、表格样式
（1）表格大小：width,height属性：宽、高
（2）表格边框：border属性 border-collapse属性用来合并默认的表格的样式 border-collapse:collapse;则将表格边框和单元格边框合并在一起
（3）奇偶选择器：:nth-child(odd|even)odd表示奇数行，even表示偶数行

tr:nth-child(odd){
	background-color:red;
}

注意：tr父元素table的第一个子元素即为第一行
8、sublime Tex的基本操作
（1）html中引入外联文件：link:css

<link rel="stylesheet" href="">

（2）div#nav

<div id="nav"></div>

（3）div.nav

<div class="nav"></div>

（4）div#nav.bar

<div id="nav" class="bar"></div>

阳光&girl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之CSS基础总结一

HTML标签属性网页的内容和样式HTML 网页的内容CSS 内容的样式CSS概述1、CSS:Cascading Style Sheets 层叠样式表2、优点：内容和样式相分离，便于修改样式CSS语法1、CSS选择器，大括号2、样式格式：属性名：属性值;（例如：font-size:12px;）3、注释：/* 注释内容 */4、规范：每一条样式声明语句都以分号结尾，并且每一条...
复制链接

扫一扫

专栏目录