CSS

什么是CSS
- 语法规范
CSS基础选择器
- 1.作用
- 2.选择器分类
- - - 1. 基础选择器
    - - 1. 标签选择器：用HTML标签名作为选择器
      - 2. 类选择器
      - 3. id选择器
      - 4. 通配符选择器
      - 2. 复合选择器
  - 基础选择器总结
CSS字体属性
- 1.字体系列(font-family)
- 2.字体大小
- 3.字体粗细
- 4.文字样式
CSS文本属性
CSS引入方式

什么是CSS

CSS是层叠样式表(Cascading Style Sheets)，也称级联样式表或CSS样式表

HTML有局限性
HTML只关注内容语义，(很单纯)
CSS-网页的美容师
1.用来美化网页，布局页面，是一种标记语言
2.主要用于设置网页的文本内容(字体，大小，对齐方式等)，图片外形(宽高，边框样式，边距)及版面的布局和外观显示样式。
总结：1.HTML主要做结构，显示元素内容
2.CSS美化HTML，布局网页。
3.CSS最大价值：HTML做结构CSS做样式

语法规范

CSS规则由选择器及一条或多条声明构成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>网页</title><style>p{color: cyan;}</style>
</head>
<body><p>意思一下</p>
</body>
</html>

CSS基础选择器

1.作用

选择标签来使用

2.选择器分类

1. 基础选择器

1. 标签选择器：用HTML标签名作为选择器

作用：可以把某一类标签全都选择出来
优点：能快速为页面中同类型标签统一设置样式
缺点：不能差异化设计
语法：

标签名 {属性1 : 属性值1;属性2 : 属性值2;....
}

2. 类选择器

差异化选择不同的标签,需要使用class属性
语法：

.类名 {属性1 : 属性值1;....
}

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>网页</title><style>.yellow{color:darkorange;}</style>
</head>
<body>姓名<ul><li class="yellow">李白</li><li class="yellow">杜甫</li><li>李商隐</li></ul>
</body>
</html>

其中class属性可以有多个类名，各个类名之间用空格分开
例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>网页</title><style>.box {width: 100px;height: 100px;}.red{color:crimson;}.green {color:lawngreen;}</style>
</head>
<body>盒子<ul><li class="box red">红</li><li class="box green">绿</li><li class="box red">红</li></ul>
</body>
</html>

3. id选择器

语法：

#id名 {属性1: 属性值1;....
}

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>网页</title><style>.box {width: 100px;height: 100px;}#green {background-color:crimson;}#red {background-color:lawngreen;}</style>
</head>
<body>盒子<ul><li class="box" id="red">红</li><li class="box" id="green">绿</li><li class="box" id="red">红</li></ul>
</body>
</html>

注：

id选择器不可重复
id选择器经常与JS搭配使用

4. 通配符选择器

语法：

* {属性1: 属性值1;....
}

不需要调用，自动给所有元素使用样式

2. 复合选择器

基础选择器总结

基础选择器	作用	特点	使用情况
标签选择器	选出所以相同标签	不能差异化选择	较多
类选择器	选出一个或多个标签	可根据需求选择	非常多
id选择器	一次只选一个标签		一般于JS搭配使用
通配符选择器	选择所以标签	选择太多，有部分不需要	特殊情况使用

CSS字体属性

1.字体系列(font-family)

语法：

p {font-family :'微软雅黑';
}
div{font-family:Arial,'Microsoft Yahei','微软雅黑';
}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体、加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

2.字体大小

css使用font-size属性定义字体大小
语法：

p{font-size: 20px;
}

px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的字体大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给body指定整个页面文字的大小

3.字体粗细

css使用font-weight属性设置字体粗细

p{font-weight:blod;
}

属性值	描述
normal	默认值（不加粗）
bold	定义粗体
100-900	400等同normal，700等同bold，数字后面不加单位

学会让加粗标签（如h和strong）不加粗，或其他标签加粗

4.文字样式

css使用font-style属性设置文本的风格

p{font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	斜体

注：我们基本不用文字样式来给字体添加斜体，而是让斜体标签（em，i）不倾斜字体

CSS文本属性

CSS引入方式

CSS(卓音前端之旅第二站)相关推荐

HTML（卓音前端之旅第一站）
HTML相关知识一.html的语法规范(标签) 特点: 标签关系: 二.基本结构标签(==骨架标签==) 三.常用标签 1. 标题标签 2.==段落和换行标签== 1.段落: 2.换行 3.文本格式 ...
Javascript之旅——第二站：对象和数组
一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组. 一:对象说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也 ...
LINQ学习之旅——第二站LTQ之标准数据库操作(增查删改)
今天要讲解主要内容是关于LINQ TO SQL中的标准数据库操作:插入(Insert).查询(Select).更新(Update)以及删除(Delete),凡是涉及到数据库方面的都会使用这些操作.而这 ...
Android用户界面设计学习之旅-第二站
通过上一篇文章,大概了解了Android用户界面的设计方式,以及如何通过XML来设计界面.并且完成了一个非常简单的示例. 在上一篇文章中,涉及到了一些资源文件,直观点说,就是res目录下的那些目录和文 ...
Sql Server之旅——第二站理解讨厌的表扫描
很久以前我们在写sql的时候,最怕的一件事情就是sql莫名奇妙的超级慢,慢的是几根烟抽完,那个小球还在一直转...这个着急也只有当事人才明白,后来听说有个什么"评估执行计划",后来 ...
Sql Server之旅——第二站理解万恶的表扫描
很久以前我们在写sql的时候,最怕的一件事情就是sql莫名奇妙的超级慢,慢的是撸一管子回来,那个小球还在一直转...这个着急也只有当事人才明白,后来听说有个什么"评估执行计划", ...
打怪升级之小白的大数据之旅(六十一)＜Hive旅程第二站:Hive安装＞
打怪升级之小白的大数据之旅(六十一) Hive旅程第二站:Hive安装上次回顾上一章我们学习了Hive的概念以及框架原理,本章节是对Hive的安装进行分享,因为它有些需要自己配置的点,所以我单独开 ...
（Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器
文章目录一:CSS概述 (1)概述 (2)语法规范 (3)CSS引入方式二:选择器 (1)基础选择器 ①:标签选择器 ②:类选择器 ③:id选择器 ④:通配符选择器总结 (2)复合选择器 ①:后 ...
小蓝同学的前端之旅--HTML\CSS集成复习
小蓝同学的前端之旅--HTML\CSS集成复习前端学习路线复习模式 api的重要性 HTML基础总结 head标签的常用标签 body标签中常用标签文本元素标签表格标签表格分组框架表单 ...

CSS(卓音前端之旅第二站)

CSS