CSS的主要使用场景就是美化网页,布局页面的
HTML只关心内容的语义,而不关心样式的丑与美
CSS是层叠样式表(Cascading Style Sheets)的简称,有时也称之为CSS样式表或级联样式表
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式
CSS可以使我们的网页更加丰富多彩,布局更加灵活自如
CSS规则由两个主要的部分构成:选择器以及一条或多条声明
选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是指对指定的对象设置的样式属性,例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个键值对之间用“;”进行区分
①紧凑格式
所有属性写在一行
②展开格式
一个属性写一行
推荐样式选择器、属性名、属性值关键字全部使用小写字母,特殊情况除外
①属性值的前面,冒号后面,保留一个空格
②选择器(标签)和大括号中间保留空格
选择器(选择符)就是根据不同需求把不同的标签选出来,这就是选择器的作用
选择器分为基础选择器和复合选择器两个大类
基础选择器:由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
标签选择器(元素选择器)是指用HTML标签作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式
基础选择器之标签选择器
男生
男生
男生
女生
女生
女生
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器
注意:
①类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
②可以理解为给这个标签起了一个名字
③长名称或词组可以使用短横线来为选择器命名
④不要使用纯数字、中文等命名,尽量使用英文字母来表示
⑤命名要有意义,尽量使别人一眼就知道这个类名的目的
基础选择器之类选择器
- 冰雨
- 来生缘
- 李香兰
- 生僻字
- 江南Style
我也想变红色
我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签
简单理解:一个标签有多个名字
多类名的使用方式
刘德华
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义
基础选择器之id选择器
迈克尔.杰克逊
在CSS中,通配符选择器使用"*"定义,它表示选取页面中所有元素(标签)
通配符选择器不需要调用,自动就给所有的元素使用样式
CSS Fonts属性用于定义字体系列、大小、粗细和文本样式(如粗体)
字体属性
小贾学前端
前端好有意思
我要好好学
下课时候的你
CSS属性之复合属性
三生三世十里桃花,一心一意百行代码