小花带你一周入门html+css（二）初识CSS丨【WEB前端大作战】

今天我们来初步认识一下CSS

下面我们先看一下CSS我们主要学点什么

CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！

关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~

完全就是我们需要什么，只要凭着需求去寻找。~follow me~

1.什么是css

CSS，层叠样式表——（Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

2.css入门书写方式

①书写位置：head标签里面，title标签下面
②书写环境：所有样式需要使用style包裹
html页面只认识标签，css不属于标签，想要让浏览器/html识别，必须准备一个环境,一对style标签，并且要将style标签添加一个属性：type=“text/css”（意为纯文本的css格式）
③书写规则：首先要确定选中的对象（控制的对象）到底是谁，后面紧跟css键值对（k:v;），所有的css键值对必须要放到一对英文状态下的大括号里面
选中的对象加大括号里面的css属性称为css样式条
注意： 属性：属性值； 的写法称为css键值对

3.css书写进阶

书写方式分类：
①内嵌式：
上面介绍的css书写方式就是行内式
内嵌式结构与样式实现半分离
②行内式：
在标签内部增加style属性，属性值是css键值对
<h3 style=" width:200px;height:200px;background:#f00;"></h3>
行内式没有实现结构与样式分离，不推荐前台工作人员使用
③外链式：
分为link引入（推荐）和 import引入（了解）
<link type="text/css" rel="stylesheet" href="css.css"/>
配合link标签的三个属性：
格式：type=“text/css” – 引入的文件格式是样式表
关系：rel=“stylesheet” – 用来说明引入的文件是当前html的样式表（必不可少）
地址：href=“URL” – css文件的路径（必不可少）
@import url(‘css路径’); 最后这个分号不能省略
tips:
外链式实现了真正的结构与样式分离
现在绝大部分的网站都采用link方式，原因在于
@import先加载HTML，后加载CSS
link先加载CSS，后加载HTML

4.文字三属性

①颜色 – color
②字号 – font-size
③字体 – font-family

文字加粗 – font-weight：bold（100,200,300…） – bold就等于700
内容对齐属性 – text-align：left|center|right

tips：网页中常用字体英文写法
微软雅黑 Microsoft YaHei
宋体 SimSun
黑体 SimHei

5.实体化属性

实体化三属性虽然简单，但是真的很重要，兼容性好不好，css学的好不好，全都体现在实体化三属性是否运用得当
实体化一个元素：是指让一个元素能够在网页中具有意义，能够看到这个元素的存在。
如何实体化元素：
给元素设置以下三个属性：
①宽度 – width
②高度 – height
③背景色 – background
tips：

• 如果没有这三个属性，我们预览网页可能什么都看不到
• 在css2.0阶段，所有标签都是矩形，如果出现了非矩形的标签需要切图制作
• 以后我们制作网页会经常遇到千奇百怪的问题需要我们去解决，解决过程中多多使用这三个属性去调试。
  

6.新标签div+span

①div：大容器、大盒子。通常用作网页的布局和排版，结构的搭建；内部可以存放任何标签、任何内容。<div></div>
②span：小容器、小盒子、通常存放特殊效果的文字或小图标、小图片等等。<span></span>

7.显示模式

显示模式：就是盒子在页面中的显示方式
所有html标签按显示模式划分为两类：块级标签和行内标签
块级标签：最具代表性的标签就是div。特点：独占一行，可以设置宽高并能生效
行内标签：最具代表性的标签就是span。特点：一行可以共存多个，可以设置宽高但是不生效，自身尺寸受内容的控制。
分为两种：块级元素和行内元素
①块级元素：独占一行，可以设置width和height并且生效
如果不设置width，则默认宽度按浏览器宽度显示
如果不设置height，则默认高度和内容一样
②行内：可以和其他行内元素在一行显示，宽高由内容撑起
③显示模式之间的转换： 属性：display；
转化为块 –block（独占一行，具有宽高）；
转换为行内 – inline（可以和其他元素在同一行显示）；
转化为行内块–inline-block（可以和其他元素在同一行显示，并且具有宽高）；
④ 隐藏：
display：none；不占位隐藏
visibility：hidden；占位隐藏
tips:

• 这些都仅仅让元素暂时隐藏，并没有把元素从html结构中删除。
• 行内块（由css制造出来的显示模式） – inline-block；特点：既有块级标签的优点（成功设置宽高）又有行内标签的优点（一行可以共存多个）
• 行内元素也称为“内联元素 ”
  行内元素有 a , span , b , u , i , strong , em，img , input
  注：其中img和input是行内块

8.选择器

选择器 是指我们要控制的元素或者对象
①标签选择器（元素选择器）：
就是以标签名称命名的选择器，如：div，h1，li,p,ol,dl等
li{ background:#ccc;}
p{font-size:14px;color:#555;}
②id选择器：#id值{css键值对}

#bg_color_green{ background:green;}
#bg_color_red background:red;}

直接在标签身上添加属性：id=“id选择器的名称”

<li id="bg_color_green">华为云市场</li>
<li>华为云学院</li>
<li id="bg_color_red">华为云论坛</li>

tips：

• id选择器分定义和应用两个步骤，但不分先后顺序
• 但凡是id选择器，声明的时候都要以#号开头，紧跟id选择器的名称（自定义），规则为：不能出现中文；不能使用特殊符号；不能以数字开头，可以以数字结尾，不能和关键字一样（关键字 ： html的标签名字和标签的属性）
  id="div" id="head" id="ul" id="name" id="title" id="class" 是不合理的
• 在一个页面中，同一个id名称只能出现1次，通常为开发人员常用的选择器

③类选择器:.类选择器名称{css键值对}
要求以点开头，后面紧跟选择器名称，名称自定义，规则同id选择器
在标签里面添加class属性：class=“类选择器”

.box{ background:pink;}
<div class="box">这是div</div>
<p class="box">这是p</p>

tips：

• 类选择器类选择器可以在页面中多次使用，是前台人员最常用的选择器
• 我们在实际工作中，如果类选择器名称由多个单词构成 ，我们通常会使用中划线或者下划线分割。
  id和class的区别：
  注意上一点——id必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器，那么即使两个DOM节点样式完全相同，那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护！！！极大的增加了维护的成本;
  简单来说id就是用来标识那些单独不重复的样式，而class是可以重复使用的。
  ④通配符选择器 *（不建议使用）
  选中所有标签（包括废标签）
  由于通配符可以选中所有标签，针对性最低，权重最低

9.选择器权重

id选择器 > 类选择器 > 标签选择器 > 通配符选择器
谁针对性高谁优先生效
!important 提权 – 可以将权重提高到最高
tips：!important书写在键值对分号之前
所有被!important标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。
如下 background:#eee 生效

   li{width:200px;height:50px;background:#eee ! important;}
   li{width:200px;height:50px;background:#f00;}

!important 用来强制使一个样式避免在之后的编码中被修改，遗憾的是IE不支持
tips学习小技巧:
学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！
【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890