css-网页美容师
1.1css简介
- css是层叠样式表，简称
css样式表 - css也是一种
标记语言 - 主要用于设置HTML网页中
的文本内容(字体大小，对齐方式)，图片外形(宽高、边框、边距)，版面布局和外观显示样式 - css的价值就在于：
使结构与样式相分离，即让HTML专注于做结构，样式交给css
1.2css语法规范
<head>
<style>
p{
color:red;
font-size:25px;
}
</style>
</head>
以上css做了两件事：
1.找到所有的p标签，（选对人）
2.设置这些标签的样式，譬如将颜色改为红色（做对事）
- 规则：
选择器+一条或多条声明，每条声明包含属性：属性值的键值对 - 选择器就是html标签，声明用
花括号括起来 - 属性和属性值之间用
：，声明与声明之间用； - 选择器{样式} 给谁改样式{改什么样式}
1.3代码规范
- 采用展开式
- 使用小写
选择器与{之间加个空格，：后面也加一个空格
2.CSS基础选择器
2.1选择器的作用
- 简单说就是选择标签用的
2.2选择器的分类
- 分为
基础选择器和复合选择器 - 基础选择器由
单个选择器组成，包括：标签选择器、id选择器、class类选择器、通配符选择器
2.3标签选择器
- 标签选择器是指用
HTML标签名作为选择器，将页面中的某一类标签全部选出来，然后修改样式
标签名 {
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
...
}
2.4类选择器
- 网页中有很多p标签，但我只想设置其中某一个时就可以用到类选择器
- 先定义一个类的css，谁想使用就调用它
- 类名不可以是p、div等标签名，不可以使用纯数字、中文来作为类名，如果类名较长可以用-来 .star-sing，有一个命名规范的手册（ Web 前端开发规范手册.doc）
口诀：样式点定义，结构类调用 一个或多个(可以给多个标签调用) 开发最常用
.类名 {
属性1：属性值1；
...
}
<style>
.green {
color：green;
}
</style>
<body>
<p class="green" >快把我变成绿色吧！</p>
<p>哈哈，还好我不想变绿</p>
</body>
2.4.2类选择器之多类名的使用
- 好处就在于可以调用公共的类，又可以调用自己独特的类
- 统一修改方便，也节省代码
<div class="red font20">亚瑟</div> font-size: 50px;字体大小
2.5 id选择器
口诀：样式#定义，结构id调用，只能调用一次，别人（别的标签）切勿使用
#id名 {
属性： 属性值；
...
}
id选择器和类选择器的区别：
- 类就好比名字可以重名，id就好比身份证
- 最大的不同在于使用的次数
- 类选择器主要用于修改样式上，id选择器一般用于页面唯一性的元素上与javascript搭配使用
2.6 通配符选择器
- 用
*定义，表示选取页面中的所有元素标签包括html、body… - 它是不需要调用，自动给所有元素使用样式
* {
属性1：属性值1；
...
}
特殊用途，以下是清除所有元素标签的内外边距
* {
margin: 0;
padding: 0;
}
3.CSS字体属性
font属性用于字体系列、大小、粗细、文字样式(倾斜)
3.1 字体系列定义font-family
p { font-family: "宋体" }
body { font-family:"Microsoft Yahei",Arial, Helvetica, sans-serif;}
- 各字体之间用
，隔开,最后加一个； - 如果有空格隔开的多个单词组成的字体，加上
"" - 当浏览器读到这段代码的时候，从第一个字体起看有没有装此字体，如果有就会优先以这种字体显示，以此类推
- 一般都使用body标签，因为页面内容都写在这里面
3.2 字体大小定义font-size
body{
forn-size: 20px;
}
- 一定一定要加上px
- 不同的浏览器字体大小的默认值不一样，因此我们要设置字体大小来保证兼容不同的浏览器
- 一般都使用body标签，因为页面内容都写在这里面
3.3 字体粗细定义font-weight
- html中用strong、b
| 属性值 | 说明 |
|---|---|
| normal | 默认值，正常不加粗 |
| bold | 加粗 |
| bolder | 更粗 |
| 数字100-900 | 数字后面不跟单位，粗体的文字变细用400（normal），细变粗用700（bold） |
可以定义一个类选择器来对重要的部分来加粗
.bold {
/* font-weight: bold; */
font-weight: 500;
}
<p>昨天做的很棒</p>
<p class="bold">今天也要加油哟</p>
3.3 字体样式定义font-style
- html中用em、i
em{
font-style: normal;
}
<em> 常用的就是让倾斜的字体变正常</em>
| 属性值 | 说明 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 斜体 |
3.4 font复合属性的写法
body{
font: font-style font-weight font-size/font-height font-family;
}- 使用此复合属性时，必须按照上面的
顺序不能改，并且各属性之间用空格 - 可以省略其中的属性，但
必需保留font-size和font-family,否则font属性不起作用
4.CSS文本属性
- 设置文本的
颜色、装饰、对齐方式、缩进、行间距
4.1文本属性之color
div {
color: red;
}
| 属性值的表示方式 | 属性值 |
|---|---|
| 预定义方式 | red、green、blue… |
| 十六进制 （ 常用） | #FF0000… |
| RGB | rgb(255,0,0)… |
4.2文本属性之text-decoration
div {
text-decoration: none;
}
`
重点记住如何删除下划线，如何添加下划线
| 属性值 | 说明 |
|---|---|
| none | 默认，没有装饰线（最常用将超链接的下划线去掉） |
| underline | 下划线（常用） |
| overline | 上划线 |
| line-through | 删除线 |
4.3文本属性之text-align
- 只能设置为水平对齐方式，不能设置为垂直对齐方式
- 一图说清楚什么叫水平对齐，什么叫垂直对齐
div {
text-align: center;
}
| 属性值 | 说明 |
|---|---|
| left | 左对齐(也是默认值) |
| center | 居中对齐 |
| right | 右对齐 |
4.4文本属性之text-Indent
- 段落的首行缩进
- 文字大小默认是16px
p {
text-indent: 32px;
/* text-indent: 2em;*/
}
| 属性值 | 说明 |
|---|---|
| px为单位 | 缩进一个给定的长度 |
| em为单位(常用) | em是一个相对单位，相对于当前元素设置的font-size来说的，1em就是一个文字大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小 |
4.5文本属性之line-height
- 行间距也称行高，包含三部分
- 默认文字大小为16px
教你如何利用工具测量行间距
5.CSS的三种引入方式
- 行内样式表
- 内部样式表
- 外部样式表
5.1行内样式表
- 就是直接在元素标签内部的style属性中设定css样式
- 把style当作标签的属性来用双引号里面是声明，每条声明之间用分号
<div style="color: red;font-size:12px;"> 青春不常在，抓紧谈恋爱</div>
5.2内部样式表
- 所谓的内部样式表，就是在html页面内部写css代码，但是放进style标签中
- style标签理论上可以放到html文档的任何地方，但一般会放在head标签里面
- 并未完全实现样式与结构相分离
5.2内部样式表
- css单独写到css文件中，然后在html中引用
步骤：
1.新建一个.css为后缀的文件夹，里面放css样式，注意不用写任何标签，直接写样式的定义即可
2在html页面中，使用link(单标签)标签来引用.css
<link rel="stylesheet" href="css的文件路径" />
| link标签的属性 | 说明 |
|---|---|
| rel | 用于说明当前文档与链接文档之间的关系，stylesheet表示链接的文档是个样式表文件 |
| href | 链接文档的url，可以是相对路径也可以是绝对路径 |
综合案例小结
- 每个div p独占一行
<hr>标签是水平线，是一个单标签，不常用- 自动换行Alt+z
- #666666 可以简写为#666 两两相同的简写
#FF00FF00 简写为#F0F
5.想要给图片居中对齐，必须给其父亲p标签，添加text-align
.pic {
text-align:center;
}
<p class="pic"> <img src="images/pic.jpeg" > </p>chrome调试工具
ctrl+滚轮放大或缩小ctrl+0还原页面大小- 点击元素，发现右侧没有样式的引入，极有可能是类名或样式引入错误
- 如果有样式，但发现样式前面有
黄色感叹号，说明是样式属性书写错误 
65
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
