1.了解CSS
css功能:页面美化.
css是层叠样式表.
css目的作用是为了'版面布局,外观样式显示'
2.行内式
<style="color:颜色;" > 字体颜色
标签+属性+属性值color:"颜色;"
font-size:18px; 字体大小
color: 颜色;
语法:<标签 style="属性1:属性值; 属性2:属性值; 属性3:属性值;"></标签>
样式分离不建议使用,文件可读性差
3.内部样式
<style> </style> 双标签内部样式
<head>
<style>
选择器{
属性:属性值;
}
</style>
</head>
4.外部样式表(外部链接样式结构完全分离)
创建style.css 格式文件 放在项目下面文件夹里
外部样式表能结构样式相分离
<link> 单标签配合属性
<link rel="stylesheet" type="text/css" href=css文件路径>编辑到html.head里
srl="stylesheet" 样式表
type 类型 引入css文件
href 引入路径
color 颜色
font-size 字体大小
好处:外部链接能更好的共享管理页面样式
css注释内容:/*注释内容*/
html注释:<!-- 注释内容 --> 注释提高代码可读性,写给我们自己看的
css样式规则(键值对规则)
1,确定加样式---选择器
2,书写{}
3,第三步 添加属性
5.类选择器
标签选择器会使全部标签内容同时改变样式,不建议使用
<style>里面输入·lv{} 类选择器可单独选择一个改变样式
使用方法:head里添加(.选择器),然后去标签输入类名
标签里添加类名: <h3 class="lv"> 类名自定义起名和style要一样
如果样式格式颜色一样就不需要重新创建 可一起使用
一个标签内部只能有一个class属性,一个class能输入多个类名属性值
<span class="red空格 类名></span>
6.类和id选择器区别 (不能用纯数字,不能中文,可用数字结束)
id选择器#号开头调用, 类选择器是.号开头调用
类选择器是可多次使用的,ID选择器只能一个页面使用一次独一无二的.
标注:做页面尽量用类
通配符选择器
*符号表示选中了的所有标签 ,包括学过w3c规定标签
margin"0"
padding"0"
7.font字体 font-size:20px; 尺寸大小(强制记忆)
不同浏览器显示字体可能不一致,
通过font-size 一开始将body标签里整体尺寸调用一致16px
文字大小基本推荐用px格式
取值单位px常用推荐,em表示一个字大小
7.1.font-family 字体 (可取多个属性值 用,隔开)(强制记忆)
按顺序自动查找字体,前者优先显示
类名{
font-family: Arial, Microsoft Yahei","微软雅黑";"黑体";
}
7.2. Unicode 字体 (取代中文和英文名称)(强制记忆)
以下编码可取代字体编辑,不会出现乱码效果
C:/Users/wulihui/Desktop/%E6%9C%89%E9%81%93%E7%AC%94%E8%AE%B0/153315442@qq.com/8caa80b17a704be7b493a97aa573bb72/clipboard.png
7.3.font-weight 字体加粗 (强制记忆)
bold 加粗
font-weight:700; 不需要添加单位 等于bold
normal 让粗体不加粗
400等价normal不加粗 700等同于bold加粗
7.4.font-style: 字体倾斜 (强制记忆)
font-style: normal; 使倾斜字体不倾斜
font-style: italic; 字体倾斜
7.5.font:综合写法 (重点)(强制记忆)
font: font-style font-weight (无法改变font-size/line-height) font-family
字体大小和行高无法删除和改变顺序
8.text-align: 文本水平对齐方式(强制记忆)
搭配:left左 right右 center中
9.line-height:行间距(强制记忆)
搭配:像素24px
设置两行之间的距离
10.text-indent: 首行缩进(强制记忆)
首行缩进em 一个1em就是一个字的距离
取值可正值也可负值
11.text-decoration 文本装饰(强制记忆)
none 没有线
underline 下划线
line-through 中划线/删除线
overline 上划线
|
|
收藏
淘帖
踩
