itfan123css学习（第一天）（css基本选择器，css样式属性，css文档属性，css导入方式）
原创CSS第一天
1、css简介
css主要使用场景：
美化网页，布局页面
1.1 html的局限性
只关注内容的语义，丑陋
1.2 css-网页美容师
- css是
层叠样式表的简称 - 也称
css样式表或者层叠样式表 - css它也是一种标记语言。
- css主要用于设置HTML页面中的
文本内容（字体、大小、对齐方式），图片外形（宽度和高度、边框样式、边距等）和布局的布局和外观显示样式 - css让我们的网页更丰富多彩，布局更灵活，理解更简单：
css可以美化 HTML，让HTML更漂亮，使页面更简单 - css最大值：HTML注重结构展示、风格css，即结构(THML)有风格的(CSS）相分离
1.3 css语法规范
css规则由两个主要部分组成：选择器和一个或多个声明。
- 选择器 用于指定css样式的 HTML标签 ， 花括号内 是为对象设置的特定样式，
- 属性和属性值
“键值对”窗体出现 - 属性是在指定对象上设置的样式属性，如字体大小、文本颜色等。
- 在属性和属性值之间（英语）。
:分开 -
多个“键值对”是英文的。
;进行区分<!DOCTYPE html>
css语法规范 有点意思
1.4 css代码风格
代码写作风格不是强制性的，但符合写作的实际发展。
1.4.1 样式格式书写
- 紧凑风格
h3 {color: deeppink;font-size: 20px;} -
强烈建议扩展格式，因为它更直观。
h3 { color: deeppink; font-size: 20px ; }
1.4.2 样式大小写样式
强烈建议样式选择器、属性名称和属性值关键字都使用小写 ，例外情况除外
h3 {
color: deeppink;
}1.4.3 样式空间样式
h3 {
color: pink;
font-size: 20px;
}- 在属性值之前，冒号之后，保留一个空格。
- 选择器（标签）和大括号在中间留有在中间。
2、css基本选择器
2.1 选择器的角色
选择器（选择器）的功能是根据不同的要求选择不同的标签。----->选择标签（选择标签） 选择器参考手册
- 查找全部h1标签，选择器（选择人员）
- 设置这些标签的样式，例如红色（做正确的事情）
2.2 选择器分类
选择器 分为 基本选择器 和 符合选择器 ，
- 基本选择器是由
单个选择器组成的 - 基本选择器又包括：
标签选择器、类选择器、id选择器和通配符选择器
2.3 标签选择器 p {}、div {}、等等 标签名 {}
标签选择器（元素选择器）指的是HTML将名称标记为选择器，按 标签名称 分类，为 翻页某一类型的标签 指定制服css样式
作用：
标签选择器可以选择所有一种类型的标签，例如< div> 标签和所有 <span> 标签
优点：
可以快速设置页面上类型标签的样式
缺点：
无法区分样式，只能选择所有当前标签
语法：
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}例如：
基本选择器之标签选择器
流泪
2.4 类选择器 .类名 {} 调用 在标签内 class="类名"
- 如果要以不同方式选择不同的标签，请分别选择一个或多个标签，可以使用
类选择器 - 需要使用结构class要调用的属性class类的含义，in。css在中，类选择器取一个点。
.号表示 - 类选择器使用"."（英文标点符号）被识别，然后是类名（自定义，由我们自己命名）
- 不能将标签选择器用作类名。 ， 不能.p，.div
- 它可以理解为给这个标签一个名称来表示
- 长名称或短语可以使用中间的水平线来命名选择器。
.star-sing - 不要使用纯数字、中文和其他名称，尽量使用英文字母表示
- 类命名规范：标题:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面周长控制总体布局宽度: wrapper 左右中：left right center 登陆条：loginbar 标志：logo 广告：banner 页面主题：main 热点：hot 新闻：news 下载:download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权:copyright 滚动：scroll
类选择器公式: 样式点定义(例如.red),结构类class="red"调用 一个或多个，最常用于开发
样式点定义(例如.red)
结构类class="red"打电话，想用几个和几个
<p class="red">有点意思</p>
<h3 class="red">有点意思</h3>
<div class="red">有点意思</div> 等等
有点意思
有点意思
有点意思
完整代码：
css语法规范
有点意思
有点意思
有点意思
css语法规范
2.5.1 类选择器多类名称 class="类名 别的类名"
我们可以为一个标签分配多个类名。------>标签有多个名称
2.5.2 如何使用多类名
1、如何使用多类名
<div class="red font20">亚瑟</div>
（1)在标签中class属性中写 多个类名
（2） 多个类名 必须使用 空格分开
2.5.3 在多类名开发中使用场景。
（1我们可以将一些标签元素放在具有相同样式的类中（公共部分）。
（2这些标签可以调用这个公共类，然后调用它们自己的唯一类。
（3)从而节省css代码，统一修改也很方便
（4)当后期布局更复杂时，多类名选择器更常用。
css语法规范
2.6 id选择器 #类名 {} 调用 在标签内 id="类名"
id选择器可以用特定id的HTML元素指定特定样式
HTML元素以 id属性 来设置 id选择器 ，css中的id选择器以 "#" 来定义
id选择器的公式：样式#定义、结构id调用，只能调用一次，其他人不应使用 ，id后端编程使用唯一性。
语法：
#id {
属性1: 属性值1;
...
}例如：
#nav {
color: red;
}
刘德华2.7 id选择器和类选择器之间的区别。
- 类别选择器(class=""Call）就像一个人的名字。一个人可以有很多名字，而一个名字可以被很多人使用。
- id选择器就像一个人的身份证号码，在整个国家是唯一的，不能重复使用。
- id选择器和类选择器之间的最大区别在于 关于使用次数
- 类选择器最常用于修改样式，id选择器通常用于页面唯一元素，通常和。javascript搭配使用
2.8 通配符选择器 * {}
在css中，通配符选择器使用 * ,定义，它表示选取页面中所有元素（标签）
这里把html body div span li 等等的标签都改为红色
语法：
* {
color: red;
}- 通配符选择器不需要调用，自动就给所有的元素使用样式
-
特殊情况才使用，后面说明使用场景（自动清除所有元素标签的内外边距）
- { margin: 0; padding: 0; }
<!DOCTYPE html>
基本选择器之通配符选择器 刘德华lalalala
2.9 基本选择器总结
- 每一个基本选择器都有使用场景，都需要掌握
- 如果是修改样式，类选择器是使用最多的
3、css字体属性
CSS Fonts（字体）属性用于定义字体系列、大小粗细和文字样式(如斜体)
在 <style ></style> 里面定义
3.1 字体系列 font-family
CSS使用 font-family 属性定义文本的字体系列
div {
font-family: "microsoft yahei";
}
p {
font-family: "宋体","microsoft yahei";
}- 各种字体必须使用英文状态下的
,隔开 - 一般情况下如果有空格隔开的多个单词组成的字体，加引号，比如
"microsoft yahei" - 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
body {font-family: "microsoft yahei",tahoma,arial,"Hiragino Sans GB"}，先看浏览器中有没有定义的第一个字体，如果有就用第一个字体，如果没有就用第二个，一次递推，尽量用默认的字体
3.2 字体大小 font-size
CSS用 font-size 属性定义字体大小
p {
font-size: 20px;
}- px（像素）大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小是16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 可以给body指定整个页面文字的大小
- 标题标签比较特殊，需要单独指定文字大小
<h>
3.3 字体粗细 font-weight
CSS用 font-weight 属性设置文本字体的粗细
font-weight: blod; 加粗字体
font-weight: bloder; 特粗体
font-weight: lighter; 细体
font-weight: 700; ，700后面不要跟单位，等价于bold都是加粗的效果，
实际开发中，我们更提倡使用数字，表示加粗或者变细
如果想让 粗体的文字变细 -----> font-weight: 400
如果想让 正常的文字加粗 -----> font-weight: 700
p {
font-weight: 700;
}
3.4 文字样式 font-style （斜体或无斜体）
CSS使用 font-style 属性设置文本的风格（斜体或无斜体）
下面是正常----->倾斜的
p {
font-style: italic;
}下面是倾斜----->不倾斜
em {
font-style: normal;
}
同桌的你注意：平常我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体
3.5 字体的组合属性
字体属性可以把以上文字样式综合来写，这样可以节约代码
复合属性：简写的方式
font: font-style font-weight font-size/line-height font-family; 的 值 必须按照顺序书写，如下
div {
font-style: italic;
font-weight: 700;
font-size: 20px;
font-family: "microsoft yahei";
}
div {
/* 复合属性：简写的方式 */
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px Microsoft yahei;
}- 使用font属性，必须按上面语法格式中的顺序书写，
不能更换顺序，并且各个属性之间以空格隔开 - 不需要设置的属性可以省略（取默认值），但必须保留
font-size和font-family属性（文字大小和字体），否则font属性将不起作用
3.6 字体属性摘要
4、css文本属性
CSS Text（文本）属性可定义文本的 外观 ，比如文本的颜色，对其文本，装饰文本，文本缩进，行间距。
4.1 文本颜色 color
color 属性定义文本的颜色
div {
color:red;
}
div {
color: red;
color: #491c80;
color: rgb(255,1,0);
}
color: #ff0000;
color: #00ff00;
color: #0000ff;
color: #fdff75;将鼠标放在 #fdff75 ,Alt和鼠标左键同时点击
下面三种方式设置颜色
332------>#333322
4.2 对齐文本 text-align （left左对齐，center中心对齐，right右对齐）
text-align 属性用于设置元素内文本内容的 水平对齐方式 。（左对齐，中心对齐，右对齐）
默认左对齐
div {
text-align: center;
}
4.3 装饰文本 text-decoration (underline下划线、line-through删除线，overline上划线)
text-decoration 属性规定添加到文本的装饰，可以给文本添加 下划线、删除线，上划线 等。
重点：如何添加下划线 text-decoration: underline; ，
如何删除下划线 text-decoration: none;
下面根据需求添加
div {
text-decoration: none;/* 取消默认的下划线 */
text-decoration: overline;/* 上划线 */
text-decoration: line-through;/* 删除线 */
text-decoration: underline;/* 下划线 */
}
4.4 文本缩进 text-indent (缩进段落的第一行)
text-indent 属性用来指定文本的 第一行缩进 ，通常是 缩进段落的第一行 。
p {
/* 文本的第一行首行缩进 多少距离 */
text-indent: 20px;
}通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度都可以是负值
p {
/* 如果此时写了2em 则缩进当前元素 2个文字大小的距离 */
text-indent: 2em;
}em 是一个相对单位，就相当于元素（font-size，不管大小如何） 一个文字的大小 ，如果当前元素没有设置大小，则会按照父元素的一个文字大小
4.5 行间距 line-height
line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离
p {
line-height: 26px;
}设置是 line-height: 26px; ，总共26，文本是16，上下间距分别是5
4.6 文本属性摘要
5、css引入方式
5.1 CSS三种样式表
按照CSS样式书写的位置（或者引入的方式），CSS样式可以分为三大类：
- 内联样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
5.2 内联样式表
内联样式表（内联样式表）是 在元素标签内部的style属性中设定的CSS样式 ，适用于修改简单样式
语法：
青春不常在- style其实就是标签的属性
- 在双引号之间，写法要符合CSS规范
- 可以控制当前的标签设置样式，直接写在标签内部
- 由于书写繁琐，并没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
- 使用内联样式表设定CSS，通常被称为行内式引入，
5.3 内部样式表
内部样式表（内嵌样式表）是写道html页面内部，是将所有的CSS代码抽取出来，单独放在一个 <style></style> 标签中
<style></style>标签理论上可以放在html文档的任何地方，但一般会在文档的<head></head>标签中- 此种方式，可以方便控制整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
-
使用内部样式设定CSS，通常被称为嵌入式引入，这种方式是我们平常练习的方式
5.4 外部样式表
实际开发中都是用 外部样式表 ，核心是 样式单独写在CSS文件中 ，之后把 CSS文件引入到HTML页面 中使用。
引入外部样式表分为两步：
- 新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中（在.CSS文件里面只有样式，没有标签）
- 在html页面中，使用
<link>标签，引入这个文件
<link rel="stylesheet" href="css文件路径"/>
5.5 CSS介绍方法概述
6，综合案例（新闻页）
制作页面整体分为两步：
1、搭建html结构页面
2、修改CSS样式
新闻页面
北方温度达盛鼎
2016-06-07 14:44 来源中国天气网
6月6日下午，在学院会议室我院召开了黄淮学院参访活动暨推进转型工作研讨会。会议由副院长汪阳主持，院长助理董世平，教务处、实验实训中心、发展规划处、人事处、就业与创业办公室及各二级学院领导参加了研讨会。
会议结合黄淮学院参访活动、第三届产教融合发展战略国际论坛，对我院的转型工作进行了研究探讨。会上发展规划处处长赵清涛汇报了我院转型试点一年来所做的工作和成绩、黄淮学院参访活动，机电信息学院陈雪梅副院长通报了第三届产教融合发展战略国际论坛春季会议的议题及精神。
教务处、实验实训中心、人事处及各二级学院领导根据黄淮学院参访学习活动，从应用型转型认识、单位目前现状、存在不足和未来规划四个方面进行了分别发言，就人才培养方案、双师型教师队伍、实习实训、课程改革毕业设计、第二课堂、实验室建设、校企合作等应用型转型工作推进的关键点进行了有益的研讨。
最后，汪阳副院长做了总结发言。他表示，各单位部门要遵循教育规律，始终以学生为本，大胆设计，多调研，多创新，在人才培养模式改革、课程质量监控、创新平台建设、师资队伍的引进培养、校企协同育人、学生思想教育等方面扎实工作，在维持好正常的教学活动的前提下，积极推动学院的应用型转型工作。
7、Chrome调试工具
Chrome浏览器提供了一个非常好的调试工具，可以用来调试我们的HTML结构和CSS样式
7.1打开调试工具
打开Chrome浏览器，按下 F12键 ，或者 右击页面空白处 -> 检查
7.2 使用调试工具
Ctrl+滚轮可以放大开发者工具代码大小- 左边是HTML元素结构，右边是CSS样式
- 右边CSS样式可以可以改动数值（左右箭头或者直接输入）和查看颜色
Ctrl+0复原浏览器大小- 如果点击HTML元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
- 如果有样式，但样式前面有黄色叹号提示，则是样式属性书写错误
版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
-
120多套各种类别微信小程序模板源码分享
-
VMware Workstation Pro 免费版win11,win10系统下载及安装
-
免费 下载Win10+11PE 网络版合盘，非常不错的制作工具和 PE 合盘！
-
免费开源的3d素材游戏库有哪些
-
目前几款免费开源数据库同步工具
-
解决SolidWorks2019许可证错误-85440
-
解决sklearn.datasets.fetch_20newsgroups下载速度慢的问题
-
解决sklearn.datasets.fetch_20newsgroups下载报错问题分享
-
解决Scratch3.0scratch-hex文件下载失败问题
-
解决RHEL7无法使用YUM源的问题
