A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 花开彼岸时 初级黑马   /  2019-4-20 22:55  /  904 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文



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        上划线






0 个回复

您需要登录后才可以回帖 登录 | 加入黑马