样式表类型
嵌入样式表
在<body></boby>中创建DIV名为demo4的标签
然后在<style></style>中引用demo4可以在设置demo4的字体样式
Background背景色
效果如图
外部样式
<link rel="stylesheet" href="test.css" /> 引用test.css文件
在CSS文件中创建了一个名为demo4标签，Background背景色为aqua
在div中引用了demo4的标签属性
效果如图
还有一种方法
@import url(" ");
在test.css中引用4.css的内容
原网页没有变
效果如图
因为在4.css中设置了背景为blank
内联样式
Style样式 直接设置dem2的样式
样式选择器
ID选择器 #id{属性:值}
ID选择器名称是不能重复的，只能作用于一个标签
在<body></body>中创建ID选择器名称为id1
在<style></style>中创建id1的样式(ID 选择器的定义需要用到井号#)
效果如图
Class选择器 .类名{属性:值}
给class设置一个标签为class2，在css中可以修改它的属性
元素/标签选择器 div{属性:值}
border边框 solid边框色
有div标签的样式全部设置为div{属性:值}中的值
通配符选择器 *{属性:值}
Margin外边距 padding用于设置内部元素距离边框的间距
页面中的内容与网页之前有空隙，可以用通配符选择器解决
效果如图
群组选择器 .demol.id多选
两个选择器之间必须用“,”(英文逗号)隔开，不然群组选择器无法生效。
子选择器 元数 空格 元素{属性:值} 标签里面的标签
选择demo4下的p标签修改样式
P标签下的文字与div标签下的不同
后代选择器 元数 > 元数{属性:值} 标签>里面的标签使用
与子选择器不同是把空格修改为>
网页背景设置
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
Top中 left左 right右 left top左上
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
no-repeat; 图像背景重复一次 repeat-x平铺x轴repeat-y平铺y轴
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
Fixed图像页面滚动 scroll图像页面固定
background-image背景图像
简写
background: url(img/HBuilder.png) no-repeat top;
//插入图片图片只重复一次，在页面中间显示
边框
边框颜色 border-color:#000
边框宽度 border-width:1px;
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
边框样式值如下：
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 实线边框（常用）
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
当然也可以简写
border: 10px solid #00FFFF ;
文字属性
color:red; 文字颜色
font-size:12px; 文字大小
font-weight:bolds 文字粗细(bold粗/normal细)
font-family:”宋体”文字字体
font-variant:small-caps小写字母以大写字母显示（可以相反）
因为我设置了小写字母以大写字母显示
效果如图，明显能看出来原来的小写字母虽然变大了还是比大写字母的字体小点
文本属性
text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;
文本线(none/underline/overline/line-through)
none/underline/overline/line-through; 定义文本上的无/下划线/上划线/中划线
letter-spacing: 字间距
列表
list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
inherit 规定应该从父元素继承 list-style 属性的值
text-decoration: none; 消除下划线
列表类型：
disc: 点
circle: 圆圈
square: 正方形
decimal: 数字
decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99
lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...
upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...
lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...
lower-latin: 小写拉丁文，例如: a, b, c, ... z
upper-latin: 大写拉丁文，例如: A, B, C, ... Z
armenian: 亚美尼亚数字
georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小写拉丁文，例如: a, b, c, ... z
upper-alpha: 大写拉丁文，例如: A, B, C, ... Z
none: 无(取消所有的list样式)
list-style 设置列表项标记的类型
disc点
效果如图
发现有下划线，可以用text-decoration: none;取消下划线
超链接
a:link {color: #A52A2A;} /* 未访问的链接 */
a:visited {color: #7FFFD4;} /* 已访问的链接 */
a:hover {color: red;} /* 鼠标划过链接 */
a:active {color: #000000;} /* 已选中的链接 */
设置了未访问，已访问，已选中，鼠标划过时的颜色
效果如图
盒子模型
盒子模型的组成部分
外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性
自身的身高 width height
内边距 padding
盒子边框 border
与其他盒子的距离 margin 外边距
设置了外边距居中
margin padding使用
1. margin
margin（外边距）属性定义元素周围的空间。
用处：可以用于调整两个元素之间的间隔。
2. padding
padding（填充）定义元素边框与元素内容之间的空间，即上下左右的内边距。
用处：用于控制文本或其他内部元素与元素边界之间的距离。
padding:内边距
值：像素/厘米等长度单位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）
单独属性
padding-top:上
padding-right:右
padding-bottom:下
padding-left:左
margin 外边距，值：与padding相同，单独属性：与padding相同
Border 边框
常见的写法 border:1px solid #foo;
单独属性:
border-widh:（边框大小）
border-color(颜色)
border-style:（线条样式）
dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
还可以综合使用
溢出
发现字数过多，会超过边框，这就是溢出
解决方法 使用overflow 属性
overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
float 脱离文档流浮动
left 元素向左浮动 right 元素向右浮动
清除浮动clear: both; left right
原本的网页是这样的 加了左浮动是这样的
加了左右浮动如图
块级元素、行内元素
块级元素：
他会独占一行，在默认情况下，其宽度自动填满其设置的宽度；
行内元素：
行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；
行内元素转换
display:none; 不显示
display:block;变成块级元素
display:inline; 变成行内元素
display:inline-block;以块级元素样式展示，以行级元素样式排列
div是块级元素
可以把块级元素转化为行内元素
<span>是行内元素，转化为块级元素
定位 position
fixed固定定位（参照物--浏览器窗口）
（忽略 top,bottom, left, right 或者z-index 声明）
relative（相对定位 ）（参照物以他本身）
元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。
absolute（绝对定位）
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
样式表类型
嵌入样式表
在<body></boby>中创建DIV名为demo4的标签
然后在<style></style>中引用demo4可以在设置demo4的字体样式
Background背景色
效果如图
外部样式
<link rel="stylesheet" href="test.css" /> 引用test.css文件
在CSS文件中创建了一个名为demo4标签，Background背景色为aqua
在div中引用了demo4的标签属性
效果如图
还有一种方法
@import url(" ");
在test.css中引用4.css的内容
原网页没有变
效果如图
因为在4.css中设置了背景为blank
内联样式
Style样式 直接设置dem2的样式
样式选择器
ID选择器 #id{属性:值}
ID选择器名称是不能重复的，只能作用于一个标签
在<body></body>中创建ID选择器名称为id1
在<style></style>中创建id1的样式(ID 选择器的定义需要用到井号#)
效果如图
Class选择器 .类名{属性:值}
给class设置一个标签为class2，在css中可以修改它的属性
元素/标签选择器 div{属性:值}
border边框 solid边框色
有div标签的样式全部设置为div{属性:值}中的值
通配符选择器 *{属性:值}
Margin外边距 padding用于设置内部元素距离边框的间距
页面中的内容与网页之前有空隙，可以用通配符选择器解决
效果如图
群组选择器 .demol.id多选
两个选择器之间必须用“,”(英文逗号)隔开，不然群组选择器无法生效。
子选择器 元数 空格 元素{属性:值} 标签里面的标签
选择demo4下的p标签修改样式
P标签下的文字与div标签下的不同
后代选择器 元数 > 元数{属性:值} 标签>里面的标签使用
与子选择器不同是把空格修改为>
网页背景设置
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
Top中 left左 right右 left top左上
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
no-repeat; 图像背景重复一次 repeat-x平铺x轴repeat-y平铺y轴
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
Fixed图像页面滚动 scroll图像页面固定
background-image背景图像
简写
background: url(img/HBuilder.png) no-repeat top;
//插入图片图片只重复一次，在页面中间显示
边框
边框颜色 border-color:#000
边框宽度 border-width:1px;
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
边框样式值如下：
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 实线边框（常用）
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
当然也可以简写
border: 10px solid #00FFFF ;
文字属性
color:red; 文字颜色
font-size:12px; 文字大小
font-weight:bolds 文字粗细(bold粗/normal细)
font-family:”宋体”文字字体
font-variant:small-caps小写字母以大写字母显示（可以相反）
因为我设置了小写字母以大写字母显示
效果如图，明显能看出来原来的小写字母虽然变大了还是比大写字母的字体小点
文本属性
text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;
文本线(none/underline/overline/line-through)
none/underline/overline/line-through; 定义文本上的无/下划线/上划线/中划线
letter-spacing: 字间距
列表
list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
inherit 规定应该从父元素继承 list-style 属性的值
text-decoration: none; 消除下划线
列表类型：
disc: 点
circle: 圆圈
square: 正方形
decimal: 数字
decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99
lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...
upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...
lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...
lower-latin: 小写拉丁文，例如: a, b, c, ... z
upper-latin: 大写拉丁文，例如: A, B, C, ... Z
armenian: 亚美尼亚数字
georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小写拉丁文，例如: a, b, c, ... z
upper-alpha: 大写拉丁文，例如: A, B, C, ... Z
none: 无(取消所有的list样式)
list-style 设置列表项标记的类型
disc点
效果如图
发现有下划线，可以用text-decoration: none;取消下划线
超链接
a:link {color: #A52A2A;} /* 未访问的链接 */
a:visited {color: #7FFFD4;} /* 已访问的链接 */
a:hover {color: red;} /* 鼠标划过链接 */
a:active {color: #000000;} /* 已选中的链接 */
设置了未访问，已访问，已选中，鼠标划过时的颜色
效果如图
盒子模型
盒子模型的组成部分
外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性
自身的身高 width height
内边距 padding
盒子边框 border
与其他盒子的距离 margin 外边距
设置了外边距居中
margin padding使用
1. margin
margin（外边距）属性定义元素周围的空间。
用处：可以用于调整两个元素之间的间隔。
2. padding
padding（填充）定义元素边框与元素内容之间的空间，即上下左右的内边距。
用处：用于控制文本或其他内部元素与元素边界之间的距离。
padding:内边距
值：像素/厘米等长度单位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）
单独属性
padding-top:上
padding-right:右
padding-bottom:下
padding-left:左
margin 外边距，值：与padding相同，单独属性：与padding相同
Border 边框
常见的写法 border:1px solid #foo;
单独属性:
border-widh:（边框大小）
border-color(颜色)
border-style:（线条样式）
dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
还可以综合使用
溢出
发现字数过多，会超过边框，这就是溢出
解决方法 使用overflow 属性
overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
float 脱离文档流浮动
left 元素向左浮动 right 元素向右浮动
清除浮动clear: both; left right
原本的网页是这样的 加了左浮动是这样的
加了左右浮动如图
块级元素、行内元素
块级元素：
他会独占一行，在默认情况下，其宽度自动填满其设置的宽度；
行内元素：
行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；
行内元素转换
display:none; 不显示
display:block;变成块级元素
display:inline; 变成行内元素
display:inline-block;以块级元素样式展示，以行级元素样式排列
div是块级元素
可以把块级元素转化为行内元素
<span>是行内元素，转化为块级元素
定位 position
fixed固定定位（参照物--浏览器窗口）
（忽略 top,bottom, left, right 或者z-index 声明）
relative（相对定位 ）（参照物以他本身）
元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。
absolute（绝对定位）
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
扫一扫
1450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
