CSS学习总结


文章目录

目录

文章目录

前言

一、CSS是什么?

二、CSS语言特点

三、CSS语法规范

四、代码风格

1. 样式格式书写

(1)紧凑格式

(2)展开格式

2. 样式大小写风格

(1)小写格式

(2)大写格式

3. 样式空格风格

五、css选择器

1.标签选择器

2、类选择器

注意:

多类名选择器

3、id选择器

id选择器和类选择器的区别:

4、通配符选择器

选择器总结:

六、CSS样式

1.CSS字体属性

(1)字体系列

注意:

(2)字体大小

注意:

(3)字体粗细

 注意:

(4)字体样式

 注意:

(5)字体复合属性

注意:

字体总结:

2.CSS文本属性

(1)文本颜色

(2)对齐文本

(3)修饰文本

(4)文本缩进

(5)行间距

3. CSS样式表

(1)行内样式表(行内式)

注意:

(2)内部样式表(嵌入式)

注意:

(3)外部样式表(链接式)

七、Chrome调试工具

总结



前言

        随着大数据时代的不断更新发展,CSS这门技术也越来越重要,CSS一直被力捧为传统的以HTML为基础的web代码的继承者。CSS使用样式表来控制整个站点字体和布局的能力,使它看起来非常有效率、易于设计和有远见,本文主要介绍了CSS的基本内容。

一、CSS是什么?

        层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

        CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。CSS最大的价值,由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离。

二、CSS语言特点

        CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破,利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说,CSS具有丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩等特点。

三、CSS语法规范

        要想熟练地使用 CSS 对网页进行修饰,首先需要了解CSS 样式规则。CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。

        1.选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式

        2.属性和属性值以“键值对”的形式出现

        3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等

        4.属性和属性值之间用英文“:”分开

        5.多个“键值对”之间用英文“;”进行区分。

        例如: 所有的样式,都包含在 <style> 标签内,表示是样式表。<style> 一般写到 </head> 上方。具体代码如下:

<head>
        <style>
            h4 {
                color: blue;
                font-size: 100px;
                }
        </style>
    </head>

四、代码风格

1. 样式格式书写

(1)紧凑格式

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

(2)展开格式

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

        强烈推荐第二种展开格式, 因为更直观

2. 样式大小写风格

(1)小写格式

h3 {
        color: pink;
    }

(2)大写格式

H3 {
        COLOR: PINK;   
    }

        强烈推荐样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外。

3. 样式空格风格

        属性值前面,冒号后面,保留一个空格 选择器(标签)和大括号中间保留空格

 h3 {
        color: pink;    
    }

五、css选择器

        选择器(选择符)就是根据不同需求把不同的标签选出来,简单来说,就是选择标签用的。

        选择器包括基础选择器和复合选择器,基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器,下面将主要讲解基础选择器:

1.标签选择器

        标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。 语法如下:

标签选择器 {

               属性:属性值

               ...

           }

        作用: 标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

2、类选择器

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

 .类名 {
            属性1: 属性值1;  
            ...
       } 

        结构需要用class属性来调用 class 类的意思

注意:

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

        2.类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示。

        3.

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值