css的引入方式:
<link rel="stylesheet" href="文件路径.">
css选择器
基础选择器:
标签选择器
标签名 { }
类名选择器,可以同时修改多个类,用逗号隔开
.类名 { }
id选择器 id不可以重复
#id { }
复合选择器
并集选择器 可以同时修改多个标签,用逗号隔开
标签名,
标签名,
...{ }
子元素选择器 修改父元素里面所有符合条件的子元素标签
父元素标签名>子元素标签名 { }
复合伪类选择器
focus伪类选择器 一般修改input标签,当input获得光标时进行修改
input:focus { }
链接伪类选择器 按照 l v h a顺序声明
a:link { 为访问的链接 }
a:visited { 访问过的链接 }
a:hover { 鼠标经过的链接 }
a:active{ 鼠标点击还没有松手的链接 }
css样式
font-family 设置字体
font-size 设置大小
font-weigth 设置粗细 400为正常粗细 标题标签需要单独设置
font-style 设置样式(斜体) normal默认值 italic 斜体
复合写法:样式,粗细,大小/行高,字体。font:normal 700 50px 微软雅黑' 有些属性可以不写,但size跟family必须写
color 修改颜色
text-decortion 修饰文本 underline下划线 overline上划线
line-through删除线 none 默认。
text-indent 段落首行缩进 2em 当前两个文字大小
line-height =高度 可以实现文字垂直居中。
text-align 文本内容水平对齐 left左 right右 center居中
css元素显示
display:block 转换为块级元素
display:inline 转换为行内元素
isplay:inline-block 转换为行内块元素
块元素
div h1-h6 p ul ol li
特点:
一个占一行。高宽,外边距,内边距都可以修改。
宽度默认值是父级宽度的100%
是一个容器,里面可以放其他元素。
行内元素
a strong b em i del s ins u span
特点:
一行可以显示多个。宽高直接设置无效。
默认宽度是他内容本身的宽度
行内元素只能容纳文本或其他行内元素。
行内块元素
img input td
特点:
一行可以显示多个,但他们之间会有空白间隙
默认宽度是他内容本身的宽度
高宽,外边距,内边距都可以修改。
css背景
background:颜色 地址 平铺 滚动 位置
插入背景图片
background-image: url(路径);
背景平铺
background-repeat:repeat 平铺 ,no-repeat 不平铺 ,repeat-x x轴平铺 ,repeat-y y轴平铺
背景固定
background-attachment: scroll滚动 ,fixed固定
背景颜色
background-color: transparent; 背景颜色如果不写默认为transparent透明
背景位置
background-position:方位名词或精确单位 ;
方位名词:top center botton left right center
精确单位:百分数或px