中软Day03
-
认识css
- css的发展历程
- 随着html的发展,为了满足前端工程的需求,css应运而生
- 网页美容师——css
- 让 HTML 从样式中解脱苦海, 实现了 HTML 专注去做 结构呈现。
- 如果JavaScript是网页的魔法师,那么CSS它是我们网页的美容师
- 没有不好看的网页,只有不会CSS的前端。
- css初识
- CSS通常称为CSS样式表或层叠样式表(级联样式表)
- 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
- 以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
- 模块与模块之间的耦合度要低,高内聚
- css的发展历程
-
css样式规则
h1{ color: red; font-size: 25px} 选择器(标签选择器) 属性:属性值 用分号连接 属性="属性值" 用空格链接
- 注意:排版结构 段落对齐书写css
-
css字体样式
-
font-size :字号大小
-
该属性的值可以使用相对长度单位,也可以使用绝对长度单位
相对长度单位 说明 em 相对与页面的尺寸 px 像素,最常用,推荐你使用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 -
相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
-
-
font-family:用于设置字体
- 样式:p{ font-family:“微软雅黑”;}
-
注意:
1.一般网页都是14px以上的字体 2.偶数字体字号,ie6等老式浏览器支持奇数会有bug 3.各种字体之间用英文状态下的逗号隔开 4.中文字体需要加英文状态下的引号,英文字体一般不需要加引号 5.当需要设置英文字体时,英文字体名必须位于中文字体名之前 4.如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman"; 5.尽量使用系统默认字体,保证任何用户的浏览器都能正确显示
-
CSS Unicode字体
-
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
-
Unicode,同一码,万国码,单一码,业界标准,它为每种语言的每个字符都设置一个唯一的二进制编码,以满足我们跨语言,跨平台进行文本转换,处理的要求。
- 用英文表示
- 用unicode
- 一般用中文
字体名称 英文名称 Unicode 编码 宋体 SimSun \5B8B\4F53 新宋体 NSimSun \65B0\5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 隶书 LiSu \96B6\4E66 幼园 YouYuan \5E7C\5706 华文细黑 STXihei \534E\6587\7EC6\9ED1 细明体 MingLiU \7EC6\660E\4F53 新细明体 PMingLiU \65B0\7EC6\660E\4F53
-
-
font-weigth:字体粗细
- 字体加粗除了用b和strong标签之外,可以使用css来实现,但是css是没有语义的。
font-weight的属性值 normal,bold,lighter,100-900(100的整数倍) 700和boldr一样,400相当与normal
-
font-style:字体风格,如设置斜体、倾斜或正常字体
字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
- normal:默认值,浏览器会显示标准的字体样式。
- italic:浏览器会显示斜体的字体样式。
- oblique:浏览器会显示倾斜的字体样式。
-
font:综合设置字体样式(重点)
选择器{ font: font-style font-weight font-size/line-height font-family;}
- 重中之重
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。 注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
-
-
开发者工具(chorme)
-
"F12"或"shift+ctrl+i"打开 开发者工具
菜单: 右击网页空白出—查看
-
小技巧
- ctrl+滚轮可以放大代码
- 可以同时查看html,css代码
- css样式可以实时更改
-
-
选择器(重点)
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。
- 基础选择器
-
标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
标签名 {属性名1:属性值1;属性名2:属性值2;}
-
优点是快速为页面用的标签同一样式,也是缺点,不能设计差异化样式
-
例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* colorHighter */ h1{ color: pink; font-size: 25px } </style> </head> <body> <!-- 耦合度 --> <!-- 低耦合,高内聚 --> <h1>浙江省宁波市</h1> <h1></h1> </body> </html>
-
-
类选择器
类选择器"."(英文点号)进行表示,后面紧跟类名
.类名{属性名1:属性值1;属性名2:属性值2;}
- 优点:可以为元素定义单独或相同的样式,可以选择一个或多个标签。
1.长名称或词组可以使用中横线-为选择器命名 2.不建议使用下划线命名css选择器 1.少按一个shift键 2.区分js变量变量 3.浏览器兼容问题,在IE6中 _tip无法生效的 3.不要用纯数字,中文命名,尽量用英文字母表示
-
例:Google
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ font-size: 100px; } .blue{ color: blue; } .red{ color: red; } .orange{ color: orange; } .green{ color:green; } .font{ font-size: 30px; } *{ padding: 0px; color: black; } </style> </head> <body> <span class="green blue">G</span> <span class="red">o</span> <span class="orange">o</span> <span class="blue">g</span> <span class="green">l</span> <span class="red">e</span> </body> </html>
-
多类名选择器
可以为标签增加多个类名,达到更多选择的目的
1.样式显示效果和html元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关 2.各个类名用空格连接 3.多类名选择器在后期布局比较复杂的情况下,还是较多使用的。
-
id选择器
id选择器用"#"进行表示,后面紧跟id名
#id名{属性名1:属性值1;属性名2:属性值2;}
- id是唯一的,只能针对文档某一个特定的元素
- id是html的id属性值,用法和类选择器类似
-
id选择器和类选择器区别
- 使用次数:id相当身份证号(不得重复,只是用一次),类选择器相当名字(多次重复使用)
-
伪类选择器
伪类选择器添加一些特殊效果,比如选择第一元素,第n个元素。
类选择器用 . 伪类用 :
-
链接伪类选择器
- :link 未访问的链接
- :hover 鼠标悬停
- :visited 已访问的链接
- :active 点击的链接
通过对应四种状态的伪类选择器,可以设置其状态。 但伪类选择器需要按照一定的顺序设置,否则某些状态效果不会生效。 选择器正确排序是 :link > :visited > :hover > :actvie。
-
例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> a:link{ color: pink; } a:visited{ color: deeppink;
-
-
- 基础选择器