Day5前端之CSS前篇

一、目标

能够说出什么是CSS
能够使用CSS基础选择器
能够设置字体样式
能够设置文本样式
能够说出CSS的三种引入方式
能够使用Chrome调试工具调试样式

二、CSS简介

• 用来美化网页、布局页面的

2.1HTML的局限性

• HTML只关注内容的语义，就像<h1>或者<a>就表示一个标题一个链接。具体什么颜色什么布局毫不关心。所以它的特点就是：丑.
• HTML也能美化，但是很繁琐，每一行添加一堆属性值，看起来臃肿吗？

2.2CSS网页美容师

• CSS是层叠样式表( Cascading Style Sheets )的简称.
  有时我们也会称之为CSS样式表或级联样式表。
  CSS是也是一种标记语言
  CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等).吸版面的布局和外观显示样式。
  CSS让我们的网页更加丰富多彩,布局更加灵活自如。简单理解: CSS可以美化HTML,让HTML更漂亮,让页面布局更简单。
  **价值：**让HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)分离

2.3语法规范

• 由两部分构成：选择器和一条或多条声明，选择器就是打算对什么元素进行美化，声明就是美化成什么样子

	         第一个声明          第二个声明
  h1   {   color : red  ;  font-size ： 25px ; }
选择器       属性    值       属性        值   

1、选择器就是HTML标签
2、在head里创建一个双标签<style></style>，往里写样式
3、属性和属性值的样式是键值对，冒号：分开
4、每一个声明之间用分号；分开，最后结尾也加；

2.4CSS代码风格

1、样式格式书写
- 紧凑型：全写在一行
- 展开型：每一个声明占一行==【强烈推荐】==
2、样式大小写风格

• 强烈建议小写
  3、样式空格要求
  • 选择器和大括号间加空格
  • 属性值前也就是冒号后加一个空格
  • h3 {color: red;}

三、CSS基础选择器

• 选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说 ,就是选择标签用的，这一过程也好比挑着来。
• 作用：选择对应的标签，再对标签设置。也就是先选人再做事。

3.1分类

• 选择器分为基础选择器和复合选择器两大类，而基础选择器是由单个选择器组成。基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
  • 1、标签选择器
    • 也称元素选择器，是指用HTML标签名称作为选择器，按标签名称分类
    • 优点是同类的全选出来了，缺点是只能全选不能单独操作
  • 2、类选择器
    • 能够单独操作其中一个标签
    • 先让这个或多个标签添加class=“name”，也就是类名，然后.name {color: red;}，注意那个点
    • 千万不要点标签名，可以用横杠连接词语比如play-ball，不要使用纯数字、中文，尽量使用英文字母，命名尽量见名知意。
    • 扩展：【多类名选择器】
      • 如果我们可以把相同样式属性的放在同一个类，然后标签再加上一个类名起到作用是不是更好，比如我修改大小我只需修改一个地方，就可以注意类名空格分开，如下：

      修改前	  .box {color: red;height: 25px;}
      	  			<div class="box"> 盒子 <div>
      修改后   .box {height: 25px;}	.color {color: red;}
      				<div class="box color"> 盒子 <div>
      

  • 3、id选择器
  • • 和class类似，只不过点换成了井号# ，class换成了id。那么和类区别是什么？那就是它是唯一的，只能调用一次，也就是只能有一个标签使用。
  • 4、通配符选择器
    • 使用“ * ”表示所有，且不需要调用，所有的元素就自动使用上了，包括html、body、head

       	* {color: red}
    

  • 5、使用频率：标签选择器使用较多，但是类选择器在修改样式中使用最多，id一般用于页面唯一元素，且多与js配合使用。通配符选择器只在特殊情况下使用。

四、CSS字体属性

• 用于定义字体系列、大小粗细、文字样式(如斜体)。

•  body {font-family. 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
   body {font-size: 20px;}
   .div {font-weight: bold;}
   .div {font-weight: 700;}
   p {font-style: normal;}
   p {font: italic 700 16px 'Microsoft yahei;}
  

• 1、尽量使用英文的，中文的有时候不识别。
• 2、尽量使用系统默认自带的，保证用户浏览器能正确显示。
• 3、以上的是常见的几种字体可以多使用。
• 4、多个字体用逗号隔开，如果一个字体的名称由两三个英文单词组成要加引号并用空格隔开。
• 5、执行的顺序是先从第一个字体找，如果有就使用，没有就找下一个字体。都没有就使用浏览器默认字体。
• 6、一般先整体设置body字体，再单独设置特殊的。
• 7、用font-size设置大小时一定要加上px（像素）。
• 8、谷歌浏览器默认大小是16px，但是我们也尽量给一个明确的值
• 9、大小和字体一样先给到body , 再单独设置某个元素。比如标题，标题需要单独设置一遍。
• 10、font-weight是变粗属性，如果说该文字比较重要建议还是使用strong 。
• 11、font-weight还可以用数字表示粗细，实际开发中更提倡用数字，数字后面没有单位。比如不想让标题不变粗则设置400就行或者写normal。
• 12、font-style是设置文本风格。可以设置斜体italic，但是很少给文字设置。反而会给em或者i标签这些斜体文字设置回正常文字normal.
• 13、如果要设置很多属性，都写上的话是不是很长很占空间，那么就可以使用复合属性。就是一行搞定，这个属性遵行一定的顺序font-style–>font-weight–>font-size/line-height–>font-family.注意顺序不能乱，以空格隔开。如果不需要设置的属性可以省略取默认值，但必须保留font-size和font-family属性，否则不起作用。
• 14、总结：font-size、font-family、font-weight、font-style、font

五、CSS文本属性

• 文本外观比如文本的颜色、对齐文本装饰文本、文本缩进、行间距等。

5.1颜色

color: 颜色，属性值有直接写颜色red；十六进制表示#FF0000，如果数字两两相同可简写为3个数#F00【常用】 ； RGB表示 rgb(255,0,0)或rgb(100% , 0%, 50%)

5.2对齐文本

text-align：属性用于设置元素内文本内容的水平对齐方式。属性值有left【默认左对齐】、right【右对齐】、center【居中对齐】, 注意实战中如果想要图片居中对齐只能操作父标签比如图片的div

5.3装饰文本

**text-decoration：**属性规定添加到文本的修饰。可以给文本添加下划线、删除线.上划线等。属性值有：none【默认。没有装饰线(最常用)】、underline【下划线。链接a自带下划线(常用)】、overline【上划线。(几乎不用)】、line-through【删除线(不常用)】

• 在开发中，有个点就是不想让链接显示下划线就可以设置为none就行。

5.4文本缩进

text-indent：属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。值是正或负的像素值，如10px。但是怎么判断是缩进两个字符呢？这里有个最好的东西叫em。em是一个相对单位,就是当前元素( font-size) 1个文字的大小，如果当前元索没有设置大小,则会按照父元素的1个文字大小。

5.5行间距

line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.
行间距有三部分组成，文字大小，上间距、下间距组成。
工具FC的屏幕卡尺测行高：从第一行的下沿到第二行的下沿。

六、CSS的引入方式

• 按照CSS书写位置或引入方式，可分为三大类：
  1、行内样式表（行内式）

  • 是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.比如就修改一行。这时候style其实就是标签属性。在双引号中。因结构样式不分离不推荐使用。也称为行内式引用。

    <div style="color: red; font-size: 12px;">只修改了这一行</div>
    

  2、内部样式表（嵌入式）

  • 内部样式表(内嵌样式表)是写到html页面内部.是将所有的CSS代码抽取出来,单独放到一个<style>标签中. 理论上可以放在任何地方，body也行。但是一般放在head里，方便控制，代码结构看起来清晰。也称嵌入式引用，练习时常用。

  3、外部样式表（链接式）

  • 实际开发都是外部样式表适合于样式比较多的情况。核心是:样式单独写到CSS文件中,之后把CSS文件引入HTML页面中使用。
  • 1、新建一个后缀为.css样式文件，把所有css代码放入.直接 p {} 写进去，注意没有标签元素。
  • 2、在HTML页面中用<link>标签引入，一般在head里

    <link rel="stylesheet" href="css文件路径">
    

`

七、chrome调试工具

• 按F12或者右键页面点击检查进入调试模式
  ①Ctr|+滚轮 可以放大开发者工具代码大小。
  ②左边是HTML元素结构,右边是CSS样式。
  ③右边CSS样式可以改动数值(上下箭头或者直接输入)和查看颜色，注意此方法只是调试代码是不会变动的
  ④Ctrl + 0复原浏览器大小。
  ⑤如果点击元素 ,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
  ⑥如果有样式，但是样式前面有黄色叹号提示,则是样式属性书写错误。
  

补充

类命名规则:
头: header
内容: content/containers
尾: footer
导航: nay
侧栏: sidebars
栏目: columny
页面外围控制整体布局宽度: wrapper
左右中: left right centers
登录条: loginbars
标志: logov
广告: bannerd
页面主体: main
热点: hote
新闻: newsu
下载: downloadw
子导航: subnavw