知识点
- CSS基本使用
- CSS选择器
- CSS字体/文本
- CSS背景
CSS导入方式三种
1、行内样式:直接写在现有的HTML标签里
比如<p style="color:red;font-size:12px;">233333333</p>
2、内部样式:把CSS样式直接写在当前页面的头部标签中
<style type="tsxt/css">
样式规则:选择器{属性:属性值}
</style>
3、外部样式:<link href="要引入的网址" rel="stylesheet"
代码从上往下执行
选择器
基本:
标签选择器 标签名
类选择器 .
ID选择器 #
其他:
后代 .div span
子代 .div>span
兄弟 .div~span 向下执行相同的
相邻 .div+span
全选择器 *
div,span{ } 可以节省重复代码
伪类选择器 link 未访问的
visited 访问后的
hover 划过
active 激活状态的
字体 font
文本属性:
常见的文本样式:
color:字体颜色
font-size:字体大小
font-family:字体类型
<strong>:字体加粗
font-weight:bold 字体加粗
<em> 斜体
font-style:italic斜体 normal(正常)
div--层标签
text-decoration:underline(有下划线) none(无下划线)设置下划线
line-through:删除线
text-align:center 文本居中对齐方式 left:对左 right:对右
line-height:行间距
letter-spacing:字符间距
border-radius: px
text-indent: 2em首行缩进
Div+css布局方式
height+line-height文字上下居中
test-align:center文字水平居中
背景属性:
background-color:背景颜色
background-image:url(图片路径);
background-repeat:no-repeat;图片不重复
background-repeat:repeat-x(向x轴延伸)
background-repeat:repeat-y(向y轴延伸)
background-position:图片偏移;
dispaly:inline; 转内联
dispaly:block; 转块状
dispaly:inline-block; 转内联块状