第二部分:CSS3

一:CSS简介

CSS的主要使用场景就是美化网页,布局页面的

        1.1:HTML的局限性

                HTML只关心内容的语义,而不关心样式的丑与美

        1.2:CSS-网页的美容师

                CSS是层叠样式表(Cascading Style Sheets)的简称,有时也称之为CSS样式表或级联样式表

                CSS也是一种标记语言

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

                CSS可以使我们的网页更加丰富多彩,布局更加灵活自如

        1.3:CSS语法规范

                CSS规则由两个主要的部分构成:选择器以及一条或多条声明

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

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

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

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

                多个键值对之间用“;”进行区分

        1.4:CSS代码风格
                1.4.1:样式格式书写

                        ①紧凑格式

                                所有属性写在一行

                        ②展开格式

                                一个属性写一行

                1.4.2:样式大小写风格

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

                1.4.3:样式空格规范

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

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

二:CSS基础选择器
        2.1:CSS选择器的作用

                选择器(选择符)就是根据不同需求把不同的标签选出来,这就是选择器的作用

        2.2:选择器分类

        选择器分为基础选择器和复合选择器两个大类

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

                基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器

        2.3:标签选择器

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





    
    
    基础选择器之标签选择器
    
    



    

男生

男生

男生

女生
女生
女生
        2.4:类选择器

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

                注意:

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

                        ②可以理解为给这个标签起了一个名字

                        ③长名称或词组可以使用短横线来为选择器命名

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

                        ⑤命名要有意义,尽量使别人一眼就知道这个类名的目的





    
    
    基础选择器之类选择器
    



    
  • 冰雨
  • 来生缘
  • 李香兰
  • 生僻字
  • 江南Style
我也想变红色
        2.5:类选择器-多类名

我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签

简单理解:一个标签有多个名字





    
    
    多类名的使用方式
    
    



    
刘德华
        2.6:id选择器

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

HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义





    
    
    基础选择器之id选择器
    



    
迈克尔.杰克逊
        2.7:通配符选择器               

在CSS中,通配符选择器使用"*"定义,它表示选取页面中所有元素(标签)

通配符选择器不需要调用,自动就给所有的元素使用样式

三:CSS字体属性

CSS Fonts属性用于定义字体系列大小粗细文本样式(如粗体)





    
    
    字体属性
    



    

小贾学前端

前端好有意思

我要好好学

下课时候的你




    
    
    CSS属性之复合属性
    



    
三生三世十里桃花,一心一意百行代码
四:CSS文本属性
五:CSS的引入方式

你可能感兴趣的:(前端,css3,前端)