相信大家都听说过：Java、Php、C、C++、C#、网站前端、网页设计等技术，但你可能不知道，这些技术需要掌握两项基础技术——html+css。 接下来我将带领大家在一周内轻松掌握这两项技术。 今天我们先来初步了解一下CSS
我们先来看看我们主要学习CSS的内容。
CSS 可能看起来很复杂。 其实只要掌握了CSS中的盒子模型、定位、页面布局，基本上就掌握了大部分了。 这个时候我们就能够准确的对网页中的各个元素进行布局，并使其适合我们的需要。 您想要的网页！
关于CSS的各种属性，我们还是可以参考学习HTML。 可以说CSS属性几乎完全是语义化的。 我们需要改变边框，即“”，那么我们需要对右边框进行一些改变，即“-right”。 显然，根据我们的需求，有“右边框宽度——-right-with”、“右边框颜色——-right-color”等等~
正是我们需要的，我们只要根据自己的需求去寻找就可以了。 ～我～
1.什么是CSS
CSS，即层叠样式表（Style），是一种能够真正分离网页呈现和内容的样式设计语言。 与传统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键值对
内联样式没有实现结构和样式的分离，不建议前台工作人员使用。
③外部链接类型：
分为链接介绍（推荐）和介绍（了解）
结合link标签的三个属性：
格式：type="text/css" – 导入的文件格式是样式表
关系：rel=""——用于表示导入的文件是当前的HTML样式表（必备）
地址：href="URL" – css文件的路径（必需）
@ url('css路径'); 最后一个分号不能省略
尖端：
外部链接样式实现了结构与样式的真正分离
现在大多数网站都采用链接方式。 原因是
@先加载HTML，再加载CSS
链接首先加载 CSS，然后加载 HTML
4. 文本的三个属性
①颜色——颜色
②字体大小——font-size
③字体-字体-
粗体文本 – font-: 粗体 (100,200,300…) – 粗体等于 700
内容对齐属性 – text-align: left||right
Tips：网页英文书写常用字体
微软雅黑雅黑
宋
黑体
5. 物化属性
物化的三个属性虽然简单，但是却非常重要。 兼容性好不好，CSS学得好不好，都体现在物化这三个属性是否运用得当。
物化元素意味着使元素在网页中有意义并且可以看到该元素的存在。
如何具体化元素：
为元素设置以下三个属性：
①宽度-宽度
②身高——
③背景颜色–
尖端：
6.新标签div+span
①div：大容器，大盒子。 通常用于网页的布局、排版和结构的构建； 任何标签和任何内容都可以存储在里面。
②跨度：小容器、小盒子，通常存放有特殊效果的文字或小图标、小图片等。
7.显示方式
显示模式：即盒子在页面上的显示方式
所有HTML标签按照显示方式分为两类：块级标签和内联标签
块级标签：最具代表性的标签是div。特点：独占行数，宽度和高度可设置并生效
内联标签：最具代表性的标签是span。 特点：多行可以共存，宽度和高度可以设置但不生效，大小由内容控制。
分为两种：块级元素和行内元素
①块级元素：占一行，宽高可设置并生效
如果不设置宽度，则按照浏览器宽度显示默认宽度。
如果不设置，默认高度与内容相同
②内联：可以与其他内联元素显示在一行，宽度和高度由内容支持。
③显示模式之间的转换：属性：；
转换为block-block（占一行，有宽度和高度）；
转换为内联——（可以与其他元素显示在同一行）；
转换为内联块——块（可以与其他元素显示在同一行，并且有宽度和高度）；
④隐藏：
：没有任何; 隐藏不占空间
:;隐藏占位符
尖端：
8. 选择器
选择器指的是我们想要控制的元素或对象
①标签选择器（元素选择器）：
是以标签名命名的选择器，如：div、h1、li、p、ol、dl等。
李{:#ccc;}
p{字体大小：14px;颜色：#555;}
②id选择器：#id值{css键值对}
#bg_color_green{ background:green;}
#bg_color_red background:red;}直接向标签添加属性：id=“id 选择器的名称”
华为云市场
华为云学院
华为云论坛 尖端：
③类选择器：.类选择器名称{css键值对}
要求以点开头，后跟选择器名称。 名称可以自定义。 规则与 id 选择器相同。
在标签中添加class属性：class="class选择器"
.box{ background:pink;}
这是div
这是p
尖端：
9. 选择权重
id 选择器 > 类选择器 > 标签选择器 > 通配符选择器
谁更有针对性，谁就先发挥作用。
！ 提升权限——可以将权重提升至最高级别
尖端： ！ 写在键值的分号之前
对于所有带有!标记的样式，即使后来重写了，浏览器也只会使用被标记的样式。
如下：#eee生效
li{width:200px;height:50px;background:#eee ! important;}
li{width:200px;height:50px;background:#f00;}
！ 用于强制样式避免在后续编码中被修改。 不幸的是，IE 不支持它。
Tips 学习技巧：
学习前端需要方法，更需要一颗平常心。 不要去想前端有多难，将来会有多难。 。 。 既然学习如此痛苦，为什么不快乐地学习呢？ ~希望大家都能成为一名优秀的前端！
