h5(html5)+css3前端笔记三

CSS简介

CSS定义

CSS是层叠样式表(Cascading Style Sheets)的简称
有时我们也会称之为 CSS 样式表或级联样式表
CSS是也是一种标记语言
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局和外观显示样式。

总结:
1.HTML主要做结构,显示元素内容
2.CSS 美化 HTML,布局网页
3.CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构(HTML) 与样式(CSS）相分离

CSS语法规范

使用 HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS 样式规则
CSS 规则由两个主要的部分构成: 选择器以及一条或多条声明.

CSS代码风格

紧凑型：h3{ color:deeppink;font-size:20px; }
展开型：（推荐）

h3 { 
  color: deeppink;
  font-size: 20px; 
}

CSS基础选择器

基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
标签选择器(元素选择器)是指用 HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

h3 { 
  color: pink;
  font-size: 20px; 
}

类选择器
<div class='red font35'> 变红色 </div>

.red { 
  color: red;  
}
.font35 {
  font-size: 20px;
}

多类名使用场景

    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>

.box {
  width: 100px;
  height: 100px;  
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}

id选择器
id区别于类，只能用一次

#pink {
  color: pink;
}

通配符选择器
这里把 html body div span li 等等的标签都改为了粉红色

* {
  color: pink;
}

CSS字体属性

默认第一个字体，系统没有会自动下一个字体

h2 {
  font-family: '宋体','Times New Roman';
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
}

复合属性

h2 {
  font:font-style font-weight font-size/line-height font-family;
}

即：字体风格、字体粗细、字体大小、字体类型；——空格隔开，记住顺序千万不能颠倒
不需要设置的属性可以省略(取默认值)，但必须保留 font-size和font-family属性，否则font 属性将不起作用

h2 {
  font: italic 700 20px '宋体';
}

CSS文本属性

CSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本装饰文本、文本缩进、行间距等。
文本颜色属性

div {
/*  color: deeppink;*/
/*  color: #ff0000;*/
  color: rgb(255, 0, 0);
}

文本对齐：left，center，right

div {
  text-align: center;
}

文本装饰

div {
  text-decoration: underline;
}

文本缩进

p {
/*  text-indent: 20px;*/
  text-indent: 2em;
}

行间距

p {
  line-height: 26px;
}

总结

CSS的引入方式

css的三种样式表

1.行内样式表(行内式)
<div style="color: red; font-size: 20px;">青春不常在，抓紧谈恋爱</div>
2.内部样式表(嵌入式)

<style>
  div {
    color: red;
  }
</style>

3.外部样式表(链接式)
<link rel="stylesheet" href="111.css">

Chrome调试工具

1）Ctrl+滚轮可以放大开发者工具代码大小
2）左边是HTML元素结构，右边是CSS样式
3）右边 CSS样式可以动数值(左右头或者直接输入)和查看颜色
4）Ctrl + 0 复原浏览器大小。
5）如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
6）如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。