CSS学习(2)--菜鸟教程
选择器
id选择器只能用一次,样式表中用#名称来定义,class选择器可以使用多次
HTML使用CSS
内嵌样式表:
写在<head>中的<style>里面
内联样式:
直接写在标签属性里面
导入样式表:
使用标签将CSS文件导入html文件中
使用标签将CSS文件导入html文件中 @import "URL";或者
@import url("URL");
需要定义在所有样式的最前面
先加载页面,在加载样式,用户体验感差
CSS注释
注释以/*开头,以*/结束
注释不能嵌套
CSS长度单位
相对长度单位
em
相对于自身 font-size(字体大小)属性的值,如果自身没有设置,则继承父元素 font-size 属性的值,1em 等同于 font-size 属性值,例如 font-size 的值为 16px,那么 1em 就等于 16px,2em 就等于 32px:
CSS文本
text-indent:首行缩进
text-alion:对齐方式
left、right、center
justify 两边对齐
text-transform:
uppercase
lowercase
calpitalize
letter-spacing:调整字间距
text-decoration
underline
overline
line-through
color
设置文本颜色
direction
设置文本方向
line-height
行高
letter-spacing
字间距
text-alion
对齐方式
text-decoration
文本装饰(下划线)
text-indent
首行缩进
text-transform
文本转换大小写等
CSS文字
font-size(字体大小)
font-style(用于设置字体倾斜)
font-family(设置字体)
font-weight(设置字体粗细)
font-family
字体
font-size
字体大小
font-weight
字体粗细
font-style
字体是否倾斜
~~~~~~~~~~
a:link {color:#FF0000;}/* 未被访问的链接 */
a:visited {color:#00FF00;}/* 已被访问的链接 */
a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}/* 正在被点击的链接 */
安照l v h a的顺序写
CSS列表
list-style(下面三个的符合写法,五顺序)
list-style-image
自定义显示图标,url()
list-style-position
inside
outside
inherit
list-style-type(编号的形状)
circle(空心圆)
square
disc(实心圆,默认)
lower-roman
CSS表格
在 CSS 中设置表格边框,请使用 border 属性
当CSS修饰表格时,要用border-collapse将边框合并
表格宽度和高度:通过 width 和 height 属性定义表格的宽度和高度
表格文本对齐:text-alion水平对齐、vertical-alion竖直方向对齐(top,bottom,center)
当border-collapse:separate时,border-spacing和才起作用,用法:border-spacing:w-length h-length
caption-side:标题的位置(top,bottom,inherit)
CSS轮廓:outline
在元素的周围划线
outline-color
outline-style
none:没有(默认)
dotted:点
dashed:长方形块
double:双solid
solid:实线
out-width
thin:细边框
thick:粗边框
medium:中等边框
length:多少像素
CSS 框模型
~~~~~~~~~~
外边距可以是负值,而且在很多情况下都要使用负值的外边距
元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的
内边距padding
padding 属性接受长度值或百分比值,但不允许使用负值。
padding-color
transparent(设置透明,不显示,默认)
padding-style
padding-width
外边距margin
margin: top right bottom left
如果缺少左外边距的值,则使用右外边距的值
如果缺少下外边距的值,则使用上外边距的值
如果缺少右外边距的值,则使用上外边距的值
margin默认值为0
auto:游览器的默认宽度
CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
~~~~~~~~~~
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
CSS定位
注释:overflow 属性仅适用于具有指定高度的块元素。
发表评论 取消回复