Web前端第七章——CSS基础

目录

​编辑

1.CSS的优势

①表现和内容分离

②增强网页的表现力

③使整个网站显示风格趋于统一

2.CSS基本语法

①基本语法:选择器{属性:属性值}

②CSS

③脚本

 ④复合属性

 ⑤多个属性

⑥CSS注释

3.CSS选择器声明

 ①集体声明

②全局声明

③派生选择器

4.选择器类型

 ①类选择器

②id选择器

③标记选择器(元素选择器)

④伪类选择器

5.CSS优势

①表现和内容分离

②增强了网页的表现力

③使网站整个显示风格趋于统一

6.CSS选择器定义与引用

①内敛样式表

②内部样式表

③外部样式表

7.CSS继承与层叠


1.CSS的优势

①表现和内容分离

CSS通过网页定义HTML标记设置如何显示网页格式,使得页面内容和表现分离,简化了网页格式设计,使对网页格式修改更方便。

②增强网页的表现力

CSS样式属性提供了比HTML更多的格式设计功能。

③使整个网站显示风格趋于统一

将CSS样式定义到样式表中,然后在多个网页中同时使用应用样式表文件中的样式,确保网站多个并且具有统一格式,并且可以随时更新样式,大大降低了网站的开发和维护成本。

2.CSS基本语法

①基本语法:选择器{属性:属性值}

selector{
    property1:vulue1;
    property2:value2;
    ...
}
/*举个例子*/
div{
    height:100px;/*盒子高度*/
    width:200px;/*盒子宽度*/
    color:blue;/*字体颜色*/
    background-color:pink;/*背景颜色*/
}

可以把上面那个语法理解为:选择器{属性:属性值}

  • 选择器: 选择器是需要改变样式的HTML元素。
  • 声明:声明是由一个或者多个属性与属性值对组成。例如:color、font-style、border...
  • 属性值&属性:属性是用于指定选择器某一方面的特性;属性值是用于指定选择器的特性的具体特性。“属性:属性值”必须一一对应,并且用":"连接,每个属性值对用";"隔开

②CSS

属性名为两个及以上单词组合时用“-”隔开,比如背景颜色是:background-color。

③脚本

脚本的背景颜色对象属性则连写为:backgroundColor,如果属性由两个及以上单词组成,则从第二个单词开始所有单词首字母大写

p{
    background-color:red;/*背景颜色*/
    font-size:20px;/*文字大小*/
    color:blue;/*文字颜色*/
}

 ④复合属性

在CSS中有些属性可以表示多个属性的值。

  • 1.用font复合属性的时候要注意顺序,否则可能出现实现不了的情况。
  • 2.复合属性中,每个属性之前用空格隔开。
  • 3.除了font之外还有border、margin等也是复合属性。
p{
    font-style:italic;
    font-size:20px;
    font-family:黑体;
}
/*可以改写为如下*/
p{
    font:italic 20px 黑体;
}

 ⑤多个属性

有些属性可以一次设置多个值。

p{
    font-family:"楷体","黑体","Time New Roman";
}

这个属性是字体的意思,如果在运行的时候发现你没有下载楷体就会看黑体有没有,没有的话就到最后一个,这个会按照字体出现顺序进行优先选择。

⑥CSS注释

注释内容不能嵌套使用:/*注释内容*/

p{
    /*注释文字,这样就是什么属性都没有设置*/
}

3.CSS选择器声明

 ①集体声明

h1,h2,h3,p{
    color:purple;
    font-size:30px;
}

②全局声明

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

*表示全局,所有标记。

③派生选择器

li strong{
    font-style:inalic;
    font-weight:normal;
    color:green;
}

4.选择器类型

 ①类选择器

任何合法的HTML标记都可以使用class属性

文字部分

②id选择器

每个id属性取值必须唯一,且只能指定一个标记,必须以字母开头。



id修饰内容

③标记选择器(元素选择器)

直接使用HTML标记名称作为选择器。

标记:伪类名{/*CSS规则*/}

④伪类选择器

这个可以用于超链接、具体标记内容中第一行、第一个字等。

常用伪类:
link:设置a标签在未访问前;
hover:设置a标签在鼠标悬停的时候;
visited:a标记访问后;
first-letter:用于块,设置第一个字符样式;
first-line:用于块,设置第一行样式;

5.CSS优势

①表现和内容分离

使页面内容和表现内容分离,简化网页格式设计,对网页格式修改方便

②增强了网页的表现力

CSS属性提供了比HTML更多的格式设计功能

③使网站整个显示风格趋于统一

将CSS样式定义到样式表文件中,然后可以在多个网页同时应用该样式表文件

6.CSS选择器定义与引用

①内敛样式表

语法:
<标记 style="属性1:属性值1;属性2:属性值2;">
    修饰部分

标记是指HTML标记,例如p、h1、body等;
标记的style定义的声明只对自身有效;
标记自身定义的style样式优先其他所有样式定义。

②内部样式表

语法:

写在HTML里面,只对网页有效,使用放置CSS规则

③外部样式表

链接外部样式表语法:

说明:link是单标记,也是空标记,只包含属性。
type:规定被链接的文档的mimf类型
rel:定义当前文档与被链接文档之间的关系
href:(URL)定义被链接文档地址

7.CSS继承与层叠

CSS继承是指子标记会继承父标记的所有样式风格,并且可以在父标记样式风格的基础上加以修改产生新的样式,而子标记的风格完全不影响父标记。

CSS层叠样式优先级:行内样式>id样式>class样式>标记样式

你可能感兴趣的:(Web前端基础复习,前端,css)