学习日记——初识CSS

1.初识CSS

①定义：级联样式表，用于网页的修饰

②应用：主要应用于网页的美化工作

③发展：1996CSS1.0→2004CSS2.0→ 2010CSS3.0

④优势：内容和表现分离（HTML和Css分离）网页的表现统一，容易修改丰富的样式，
使得页面的布局更加灵活减少网页的代码量，增加网页的浏览速度，
节省网络带宽运用独立于页面的CSS，有利于网页被搜索引擎收录

2.CSS语法

选择器 { 声明1;

              声明2;

              ……  }

特点1：选择器包含基本选择器和高级选择器，用来获取html元素
特点2：{}代表语法体，用来存放CSS代码
特点3：属性名一般是CSS中的语法
特点4：属性值一般是属性中的内容或者范围
特点5：基于W3C标准不建议省略

3.style标签

 

<style type="text/css">
            p{
                background: red;
            }
        </style>

 

 

特点1：使CSS的代码在网页中生效
特点2：type=”text/css”代表告诉浏览器当前style标签中的代码是css代码

4.CSS引入

①行内样式

特点1：在HTML标签行中引入style属性，并对属性名设置属性值，或者对多个属性名设置多个属性值

<p style="background: green; color: red;">我是中国人</p>

 

②内部样式

特点：在head标签中引入style标签，type=”text/css”代表告诉浏览器当前style标签中的代码是css代码

<style type="text/css">
            p{
                background: blue;
                color: red;
            }
        </style>

 

③外部样式

特点1：利用link标签
特点2：rel=”stylesheet” 代表使用外部样式
特点3：type=”text/css”告诉浏览器文件中的代码是css代码
特点4：href=”css/common.css”代表当前HTML引入的是css路径下的common文件

<link rel="stylesheet" href="css/common.css" />

p{
    background: blue;
    
            }

CSS样式优先级
1.行内样式>内部样式表>外部样式表
2.就近原则

 

5.基本选择器

①标签选择器

<style type="text/css">
            p{
                background: blueviolet;
                color: red;
            }
            h1{
                color: deepskyblue;
            }
        </style>

 

②类选择器

.a{
                color: blue;
            }
<p class="a">123</p>

 

③ID选择器

#b{
                color: pink;
            }
<p id="b" >456</p>