前端自学第4天

自学前端（第四天）

html先告一段落，接下来开始css的学习。

• CSS简介
• CSS基础选择器
• CSS字体属性
• CSS文本属性
• CSS的引入方式
• 综合案例
• Chrome调试工具

1.CSS简介

CSS的主要使用场景就是美化网页，布局页面的。
CSS是层叠样式表的简称。
有时我们也会称之为CSS样式表或级联样式表。
CSS也是一种标记语言。
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式（CSS）相分离

CSS语法规范
使用html时，需要遵从一定的规范，CSS也是如此。CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
选择器是用于指定CSS样式的html标签，花括号内是该对象设置的具体样式。

 p{
            color: chartreuse;
            font-size: 20px;
        }

2.CSS基础选择器

2.1 CSS选择器的作用

选择器就是根据不同的需求把不同的标签选出来这就是选择器的作用，简单来说，就是选择标签用的。

2.2 选择器分类

选择器分为基础选择器和复合选择器两个大类。

• 基础选择器是由单个选择器组成的。
• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

2.3 标签选择器

语法：

 		p{
            color: green;

        }
        div{
            color: indigo;
        }

标签选择器是指用HTML标签名称作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式。
作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。
优点：能快速为页面中同类型的标签同意设置样式。

2.4 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
语法：

.类名{
属性1：属性值1
...
}

web前端命名规范整理：https://www.jianshu.com/p/6417143c4b18

2.5 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素一id属性来设置id选择器。CSS的id选择器以“#”来定义。
语法：

   #pink{
            color: pink;
        }

id选择器和类选择器的区别
id选择器只能调用一次。
类选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

2.6 通配符选择器

在css中，通配符选择器使用“*”定义，她表示选取页面中所有元素（标签）

 * {
            color: pink;
        }

通配符不需要调用，自动给所有元素使用样式，特殊情况下才使用。

CSS字体属性

CSS Fonts属性用于定义字体系列，大小，粗细和文字样式。

3.1 字体系列

CSS使用font-family属性定义文本的字体系列。

  .head {
            font-family: "微软雅黑";
        }

        p{
            font-family: 'Times New Roman', Times, serif;
        }

3.2 字体大小

CSS使用font-size属性定义字体大小。

  .head {
            font-family: "微软雅黑";
            font-size: 20px;
        }

        p{
            font-family: 'Times New Roman', Times, serif;
            font-size: 10px;
        }

3.3 字体粗细

CSS使用font-weight属性定义字体粗细。
实际开发中，更提倡使用数字。
.blod{ font-weight: bold; }

3.4 文字样式

CSS使用font-style属性设置文本的风格

文本属性总结：
color:文本颜色 通常使用十六进制
text-align:文本对齐 可以设定文字水平的对齐方式
text-indent:文本缩进 通常我们用于首行缩进2个字的距离
text-decroation:文本修饰：添加下划线 underline 取消下划线 none
line-height:行高 控制行与行直接的距离

4.CSS引入方式

样式表 优点 缺点 使用情况
行内样式表 书写方便，权重高 结构样式混写 较少
内部样式表 部分结构和样式相分离 没有彻底分离 较多
外部样式表 完全实现结构和样式相分离 需要引入 最多

现在继续学习前端，前面的知识要重新复习了，最近太忙。。。一直没更