《research-css-视频教学》教学笔记

hellobbboy

墨衍会员 · AI 创作全网分发码龄17年

关注

最新推荐文章于 2026-09-21 12:54:48 发布 136 阅读 AI 写同款· GEO 优化 ›

视频地址

一，综述

HTML是负责网页的内容；CSS是负责网页的样式和布局的；JavsScript是负责网页的控制的；

二，使用CSS：

1，写入标签的style属性中：只能控制一个标签的样式

<h1 style="color:white;background-color:blue">

2，添加style标签到html页面中：能控制一个页面的样式

<style type="text/css">
h1{
color:white;
background-color:blue
}
</style>

3，将css文件导入html页面中：能控制多个页面的样式，推荐使用

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

优先级：行内 > 页内 > 链接 > 浏览器默认

继承：子标签会继承父标签的某些样式

三，CSS语法：

选择器 { 键值对... }

1，选择器：

基本选择器：

标签选择器	p	对页面统一样式的默认级设定，通常通过body设定背景图，对默认字体的设置
类别选择器	.class	对特定组件的样式定制
ID选择器	#ID	通常结合javacript实现样式的动画

选择器层叠优先级：ID选择器 > 类别选择器 > 标记选择器

复合选择器：

交集选择器	连写	div.special{.......}
并集选择器	逗号隔开	div, h2, p{......}
后代选择器	空格隔开	div h1.first span{......}

2，样式属性

a>背景（不能继承）

属性名	作用	默认值	可选值
background-color	背景颜色	无	background-color: #00ff00
background-image	背景图片	无	url(/img/bg.jpg)
background-repeat	图片是否平铺	平铺	no-repeat,repeat-x,repeat-y
background-position	图片位置	center center	top/bottom right/left
background-attachment	图片是否移动	scroll	fixed

b>段落

属性名	作用	默认值	可选值
text-indent	头行缩进	无	2em
text-align	文本对齐	left	right,justify
text-decoration	文本装饰	none	underline,overline,line-through
text-transform	文本大小写	none	uppercase,lowercase,capitalize
word-spacing	词间距		30px
letter-spacing	字间距		30px
line-height	行间距		120%
white-space	处理空白	normal(合并空格，忽略换行，自动换行)	pre(原有样式),nowrap(合并空格，忽略换行，不自动换行)

c>字体

属性名	作用	默认值	可选值
font-family	字体		serif, sans-serif,monospace, cursive, fantasy
color	字体颜色		#00ff00
font-size	字体大小	16px / 1em	32px
font-weight	字体粗细	normal	100-900。400=normal。700=bold
font-style	字体倾斜	normal	italic

d>列表特有属性

属性名	作用	默认值	可选值
list-style-type	列头样式	disc(实心圆)	none(无标记), square(实心方块),decimal(数字), cjk-ideographic(汉字), upper-alpha(大写英文), upper-alpha(小写英文), lower-roman(小写罗马), upper-roman(大写罗马)
list-style-image	图像列头		url(xxx.gif)

e>表格特有属性

属性名	作用	默认值	可选值
vertical-align	垂直对齐	center	top, bottom
border-collapse	边框合并	separate	collapse
border-spacing	边框间距		10px 20px
empty-cells	空格是否绘框	show	hide
table-layout	是否按内容显示大小	automaic	fixed
caption-side	标题位置	top	bottom

http://www.w3school.com.cn/tiy/t.asp?f=csse_table_fancy

f>链接伪类选择器和常改变属性

伪类选择器	作用
a:link	未被访问的链接
a:visited	已被访问的链接
a:hover	鼠标悬停的链接
a:active	正在点击的链接

常改变属性：color,font-size, background-color, text-decoration

http://www.w3school.com.cn/tiy/t.asp?f=css_link_advanced

3，布局属性

a>大小

每个HTML元素都是一个盒子。每个盒子有九种属性决定大小：

属性名	作用	方向
width	内容宽度	max-width,min-width
height	内容高度	max-width,min-height
padding	内边距	padding-top, padding-right, padding-bottom, padding-left
border-width	边框宽度	border-top-width, border-right-width, border-bottom-width, border-left-width
border-color	边框颜色	border-top-color,border-right-color, border-bottom-color, border-left-color
border-style	边框类型	border-top-style,border-right-style, border-bottom-style, border-left-style： none,solid,dotted,dashed,double,groove,ridge,inset,outset http://www.w3school.com.cn/tiy/t.asp?f=csse_border-style
margin	外边距	margin-top, margin-right, margin-bottom, margin-left

简写顺序：top->right->bottom->left

滚动条属性：overflow

一旦内容超过盒子大小，则会出现滚动条。通过设置overflow属性，可定制滚动条的行为

可选值	作用	说明
visible	自动显示滚动条	默认
auto	自动显示滚动条
hidden	总是隐藏滚动条
scroll	总是显示滚动条

b>位置

标准流：行级元素左右排列，左右margin不合并。块级元素上下排列，上下margin合并。

display：

可选值	作用	说明
inline	行级元素	如a, span
block	块级元素	如div, p, h1
none	禁止显示

非标准流：分为浮动和定位。

float：通过float属性指定方向。浮动后，块级元素不占一行，并且将浮动到left或right的位置。可选值：left, right

position：通过position属性指名定位方式，并结合top, bottom, left, right属性来设置偏移。

可选值	作用	说明
static	按照标准流或浮动	默认值
relative	基于标准流偏移	元素将还在标准流中
absolute	基于设置position的父容器偏移	元素被移除标准流
fixed	基于浏览器窗口偏移	元素被移除标准流

四：设计思路（摘自css禅意花园）

内容决定样式，如果内容本身就十分复杂，而且足够吸引浏览者的注意那么就没有必要添加过多的修饰。
为页面留白是一个很好的理念，文本需要呼吸的空间，浏览者需要思考的空间。间隔的空白并不是什么都没有，信息显示的方式更加优雅，让浏览者倍感轻松。

装饰：
图标是简化了的符号，用来标识某一个事物和概念，或者用一个抽象化的图形来代替一段很长的文字。
LOGO：为什么很多网站都放在左上角？因为浏览者的目光首先落在这里；右上角的内容重要性略输于左上角，但是还是高于其它部分的内容
图像:图像的格式有很多种，但是适合Web的只有三种：GIF JPEG PNG；JPEG不支持透明度 GIF支持1位的透明设置 PNG支持8位的透明度
线条的作用是增加页面的韵律和层次，但是过多的线条会给浏览者网格结构的暗示，无论你的原意是不是这样。所以线条只用在最需要的地方。
光和影的作用是增强真实感距离感和层次感，说到底是怎样使用光源的问题。错误的使用光源会把问题搞糟，比如光影效果的不一致。
形状：圆形经常和女性、温暖舒适爱情联系在一起；圆弧经常和社区、群体、忍耐、运动、安全的含义。三角形通常让人联想到男性阳刚表达诸如强壮、攻击、运动感等含义。浏览者的目光经常被棱角的方向导向，指向上方代表攻击性，指向下方则暗示出消极的意义。方形暗示了力量和根基可以让它看起来足够的监视稳重。
色彩：蓝色是全世界范围内都被广泛接受的颜色。红色和白色同时使用有加强的意义。绿色在美国让人联系到金钱，在其它的文化环境中不一定。橙色标识降价，这也是一个世界范围内的共识。黄色代表了温暖乐观。紫色一直是页面配色的禁忌。棕色是一种中立颜色。黑色代表沉重，白色代表纯洁，可是同时这两种颜色都有悲伤和死亡的暗示。
不同的颜色还会引起浏览者不同的心理联想。CSS现在支持17中颜色。

布局：
HTML文档流按照声明顺序显示在页面上，absolute可以将文档中的位置从原来的位置上删除，并重新定位到新的任意位置上；float并不是定位选项而是给元素分配空间，然后然文档中的其它元素自动环绕其周围；float的优势在于它保留在文档之中而周围的元素也清楚它的位置。
绝对定位是一个最直接最有效最简单的布局方式，而如果那些需要考虑页脚，或者其它元素需要了解周围元素的布局，Float是不二之选。