前端基础,css(1)css基础知识

目录

1.css基础知识

        1.1 css的基础概念

        1.2 css的语法规范

        1.3 css的样式风格

        2.CSS选择器

               2.1 css选择器基础知识

        2.2类选择器知识点

        2.3 类选择器的多类名

        2.4 id选择器

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

        2.6 通配符选择器

3.选择器总结


1.css基础知识

        1.1 css的基础概念

        Css是层叠样式表(Cascading Style Sheets)的简称。

        有时我们也会称之为CSS样式表或级联样式表

        CSS是一种标记语言

        CSS主要用于设置HTML页面中的文本内容(字体,大小,对齐方式等)、图片的外形(宽,边框样式,边距等)以及版面的布局和外观相似样式。

        简单来说:CSS可以美化HTML,让html更加漂亮,让页面布局更加简单。

        总结:

                1.Html主要做结构,显示元素内容。

                2.css美化html,布局网页。

                3.Css最大价值:让html专注于结构呈现,样式交给css,实现结构与样式相分离。

        1.2 css的语法规范

                css的规则主要由:选择器以及一条或者多条声明组成

                        

                注意:

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

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

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

                        4.属性和属性值直接可以用英文“:”分开

                        5.多个键值对之间用“;”进行结尾

        1.3 css的样式风格

                (1)紧凑格式

                        

                (2)展开格式

                        

                (3)空格规范

                        属性值前面,冒号后面,保留一个空格

                        选择器(标签)和大括号中间保留一个空格

        2.CSS选择器

               2.1 css选择器基础知识

                选择器就是根据不同的需求把不同的标签选出来。

                选择器分为:

                        基础选择器  由单个选择器组成的包括:

                                标签选择器 :    可以把某一类标签全部选择出来

                                类选择器 :       可以差异化选择不同的标签,单独选一个或者多个                                                

                                id选择器:

        2.2类选择器知识点

                语法:                                                                                                             

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

                                                

                口诀:样式点定义,结构类调用,一个或多个,开发最常用

                注意:

                 (1)类选择器使用“.”(英文点号)进行标识,后面紧跟着类名(自定义,我们自己命名)

                (2)可以理解为自己给标签起一个名字,来表示

                (3)长名字或词组可以使用中横线来为选择器命名

                (4)不要使用纯数字,中文等命名,尽量使用英文字母来表示

        2.3 类选择器的多类名

                1.多类名的使用方式

                (1)在标签class属性中写多个类名

                (2)多个类名必须用空格隔开

                (3)这些标签就可以分别具有这些类名的样式

                2.多类名在开发中的使用场景

                (1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面

                (2)这些标签都可以调用这个公共的类,然后再调用自己独有的类

                (3)节省CSS代码,统一修改方便

        2.4 id选择器

                id选择器可以为标有特定id的html元素指定特定的样式

                html元素以id属性来设置id选择器,css中的id选择器以"#"来定义

                口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用

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

                (1)类选择器好比人名,一个人可以有多个名字,同时一个名字可以被多个人使用。

                (2)id选择器好比人的身份证号码,全国唯一,不能重复。

                (3)id选择器和类选择器最大的不同在于使用次数上

                (4)类选择器在修改样式中用的最多,id选择器一般用在页面的唯一性元素上,经常和Js搭配使用。

        2.6 通配符选择器

                在css中,通配符选择器使用“*”定义,它表示选取页面中所以元素(标签)

3.选择器总结

                                        

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Flyoungbuhu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值