web前端学习——DAY4-CSS
CSS目的:让网页的结构和样式分离!
CSS(Cascading Style Sheets)层叠样式表
样式写在head和/head之间
css注释写法:/* 注释内容 */快捷键:ctrl+shift+/
注意事项:
-1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
-2.属性和属性值以“键值对”的形式出现。
-3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
-4.属性和属性值之间用英文“:”连接。
-5.多个“键值对”之间用英文“;”进行区分。
eg:
1.字体样式规则
(1)字号大小
最常用使用相对长度单位,推荐px(像素)。段落当中基本上是14px,尽量用偶数。
(2)font-family:字体
p{ font-family:“微软雅黑”;}
注意:
-1. 现在网页中普遍使用14px+。
-2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
-3. 各种字体之间必须使用英文状态下的逗号隔开。
-4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
-5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: “Times New Roman”;。
-6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
(3).font-weight:字体粗细
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
提示:数字 400 等价于 normal,而 700 等价于 bold。 但是我们更喜欢用数字来表示。
eg:
(4)font-style字体样式
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
eg:让斜体变得不倾斜。
(5)font综合字体样式
font属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
2.利用chrome排查错误
按f12,检查,左边为html,右边是css。
提示:ctrl+滚轮 可以 放大开发者工具代码大小
3.选择器(重点!!!)
(1)标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
之前学的都是标签选择器。
(2)类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
举个栗子:
上面声明,下面引用。
声明命名规范:
注意:
-1.长名称或词组可以使用中横线来为选择器命名。
-2.不建议使用“_”下划线来命名CSS选择器。
-3.不要纯数字、中文等命名, 尽量使用英文字母来表示。
废话:每天都有一点点点点点小进步!开森!!!