初学Web第三天

CSS

HTML局限性：只关注内容的语义，做简单的样式
CSS是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为CSS样式表和级联样式表
主要设置HTML 页面中的文本内容、图片的外形以及版面布局和外观显示样式。

语法规范

两部分组成：选择器以及一条或者多条声明。
/* 选择器{样式} */
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以"键值对"的形式出现

代码风格

1.样式格式书写
①紧凑格式
h3 { color: deepink;font-size: 20px;}
②展开格式(推荐)
h3 {
color: pink;
font-size: 20px;
}
2.样式大小写风格
提倡小写字母书写
h3 {
color: pink;
}
3.空格规范
①属性值前面，冒号后面，保留一个空格
②选择器（标签）和大括号中间保留空格

选择器分为基础选择器和复合选择器
基础选择器是由单个选择器组成的。包括：标签选择器、类选择器、id选择器和通配符选择器
标签选择器是指HTML标签名称作为选择器，按标签分类，为页面中某一类标签指定同意的CSS样式。
类选择器是单独选择一个或者几个标签，可以使用类选择器。
.类名 {
属性1： 属性值1；
…
}
头：header；内容：content/container；尾：footer；导航：nav；侧栏：siderbar；栏目：column；页面外围控制整体布局宽度：wrapper；左右中：left/right/center；登录条：loginbar；标志：logo；广告：banner；页面主题：main；热点：hot；下载：download；子导航：subnav；热点：hot；菜单：menu；子菜单：submenu；搜索：search；友情链接：friendlink；
我们可以给一个标签指定多个类名，用空格分开
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中Id选择器以“#”来定义
注意：id属性只能在每个HTML文档中出现一次。口诀：样式#定义，结构id调用，只能用一次，别人切勿使用。
通配符选择器在CSS中，通配符选择器使用“*”定义，它表示选取页面页面中所有元素，特殊情况使用
语法：
* {
属性1： 属性值1；
…
}

字体属性

CSS Fonts（字体）是用于定义字体系列、大小、粗细、和文字样式（如斜体）
CSS使用font-family属性定义文本的字体系列
p { font-family:“微软雅黑”;}
div {font-family: Arial,“Microsoft Yahei”,“微软雅黑”;}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中能正确显示
CSS使用font-size属性定义字体大小
p {
font-size: 20px;
}
CSS使用font-weight属性设置文本的粗细
normal：正常的字体；bold：粗体；bolder：特粗体；lighter：细体；number：100/200/300/400
CSS使用font-style属性设置文本的风格
body {
font: font-style font-weight font-size/line-height font-family;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性之间用空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

文本属性

color定义文本的颜色
text-align属性用于设置元素内文本内容的水平对齐方式：left，right，center。
text-decoration属性规定添加到文本的装饰。可以给文本添加none：默认；underline：下划线；line-through：删除线；overline：上划线等。
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
line-height属性用于设置行间+距的距离（行高）。可以控制文字行与行之间的距离

CSS三种样式表

1.行内样式表（行内式）
2.内部样式表（嵌入式）
3.外部样式表（链接式）：新建一个后缀名为.css的样式文件，把所有的代码都放入此文件中；在HTML页面中，使用< link rel=“stylesheet” href=“css文件路径”>标签引入这个文件。通常被称为外链式或链接式引入，是最常用的方式