前端小生CSS分享学习01

欢迎各位小哥哥小姐姐阅读本<小生>的文章,对大家学习有帮助,请点赞加关注哦!!!!!!!!!!!

您的点赞和关注将是我持续更新的动力呢.^v^

今日重点:

1.css基本语法规则

2.css文字属性的设置和使用

==3.css各种选择器的语法即使用==

4.css三种显示模式的特点以及灵活使用互相转换

5.css伪类选择器的循序即使用

今日目标:

1.能够灵活运动标签选择器 类选择器 id选择器和多类名选择器.(必须清楚每个选择器的语法结构)

2.独立完成综合案例

01 CSS产生的原因.avi

结构样式的分离更符合我们的开发需求(更符合我们的编程模式)

02 CSS网页的美容师.avi

css的出现,就是为了美化页面 给我们的页面添加一些丰富多彩的元素

03 体会CSS样式.avi

我们通过给每一个html元素设置一些样式属性 那么这个标签就有了一些对应的特征,比如一个标签的颜色是红色 那么这个红色部分就是他的特征

04 CSS样式规则.avi

选择器 {
 属性1:属性值1;
 属性2:属性值2;
}
1.属性和属性值之间用英文的冒号隔开
2.多个属性中间用英文的分号隔开

05 字体样式字号和字体.avi

• 首先,我们先来了解一下作为一个普通的字体有哪些特征呢?
• 1.字体大小
• 2.字体粗细程度
• 3.字体格式(宋体.微软雅黑等等)
• 4.字体是否倾斜

在我们网页设计的过程中,我们比较常用到的就是字体的大小和字体的格式.

首先 ,我们先来学习字体大小

font-size (字号大小):设置字体的字号大小,一般使用px或者em作为字体大小的单位

font-size: 14px; 这是14号字体

06 字体字号常用技巧.avi

font-family:"Microsoft YaHei" | tahoma| arial.

font-family:设置文字是属于什么字体(通常情况下浏览器弄人的是宋体,更多的时候我们是转化为微软雅黑)

font-family: "微软雅黑";

07 unicode字体.avi

了解unicode编码表,我们可以通过unicode编码设置字体的编码格式,

08 CSS注释.avi

ctrl+/ 单行注释

ctrl+shift+/ 多行注释

09 字体加粗.avi

font-weight: normal| bold | bolder

1 取值范围是100-900

2. 必须是100的倍数

3. 必须能被100整除

font-weight: 700;

10 字体倾斜.avi

font-style: normal | italic | oblique

表示字体倾斜,一般由两种字体倾斜的方法:
1.font-style: italic;(找这个字体中的斜体,如果有的话就会显示斜体,如果是一些比较冷门的字体,没有斜体字的话,就不会显 示任何效果)
2.font-style: oblique;(强行变成斜体,如果资料库里面的这个字体没有斜体的话,就是用这种)

11 ==字体综合设定.avi==

字体:字体样式(是否倾斜) 字体的粗细程度 字体的尺寸大小 字体的编码(设置字体)
font:font-style font-weight font-size font-family;
font: italic bold 14px "微软雅黑" ;

注意:设置字体的连写的时候 ,必须要加上font-size和font-family属性,而且顺序不能颠倒.

12 调试工具chrome使用.avi

• 要求:

1. 学会使用指针工具调试代码,多使用F12审查元素,多使用右键-->检查键
2. 学会看错,遇到错误的地方不要着急,哪里错了点哪里
3. 调试不出来问文哥,爱你们,哈哈.

13 标签选择器.avi

首先先理解一下什么是选择器,比如找老婆,每个人都有一种择偶标准.那么你要选择一种什么标准的,这就是一种选择.

html里面有很多的标签,我们到底该选择什么元素去给他添加一些样式,该怎么选择呢?

选择器有哪些特点?

1. 必须要有女孩子才能选择吧 那么 首先要有标签
2. 需要找女孩?怎么找?
3. A找所有五官精致的(皇帝选妃) 比如我们用的标签选择器,只要是五官精致的,都要.
4. 找一类人,比如,只要脸上有美人痣的,都可以来大皇宫,类选择器
5. 找某一个人,我只要凤姐,都别抢(那么这个是id选择器)

• 总结:选择器,先声明,再调用.

标签选择器:
我们需要对所有的p标签设置颜色,那么,我们可以使用标签选择器.
<style>
 p {
 color:red;
 }
</style>
<p>
 这是一个p标签
</p>
<p>
 这是一个p标签
</p>

14 ==体会类选择器.avi==

类选择器:

先声明一个类名 然后通过.类名去调用这个class类名为XXX的这个标签,并给他添加相应的属性
.wangli {
 color: green;
 }
<em class="wangli">长沙的天气真好啊!</em>

15 CSS命名规范.avi

• 命名的取值规范只能是：0-9，a-z，A-Z，_，-，
• 不能以数字开头，推荐使用有含义的单词作为类名

16 谷歌课堂案例.avi

独立完成google练习

<style>
 span {
 font-size: 100px;
 }
 .c-blue {
 color: blue;
 } 
​
 .c-red {
 color: red;
 }
​
 .c-green {
 color: green;
 }
​
 .c-orange {
 color: orange;
 }
​
 </style>
 <span class="c-blue">G</span>
 <span class="c-red">o</span>
 <span class="c-orange">o</span>
 <span class="c-blue ">g</span>
 <span class="c-green">l</span>
 <span class="c-red">e</span>
 <span id="c-pink">e</span>

17 ==多类名选择器.avi==

• 类名可以写多个(多类名可以实现更多的需求)

类名是可以为多个的 中间中空格隔开
​
<span class="c-blue fSize50 bgs">g</span>

总之,我们后面会慢慢体会到多类名的有点--贼好用

18 ==ID选择器.avi==

• id选择器中的id名是唯一的

先在标签里面书写一个id名 然后通过#id名去调用
<style>
 .xiongda{
 font-size:100px;
 }
 #xiongda { /* id选择器 和 类选择器 结合记忆更好 */
 color: pink;
 }
</style>
<div id="xiongda" class="xiongda">熊大</div>

​