Python全栈开发(CSS基础03)

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

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

有不懂的问题可以私聊我哦!

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>

相关推荐