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
还原页面大小- 点击元素,发现右侧没有样式的引入,极有可能是类名或样式引入错误
- 如果有样式,但发现样式前面有
黄色感叹号
,说明是样式属性书写错误