CSS01

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

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

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

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

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

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

所有的样式,都包含在 <style> 标签内,表示是样式表。<style> 一般写到 </head> 上方。

<head>

      <style>

            h4 {

                  color: blue;

                  font-size: 100px;

            }

        </style>

</head>

选择器

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

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

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

标签选择器

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

语法

标签名{

    属性1: 属性值1; 

    属性2: 属性值2; 

    属性3: 属性值3; 

    ...

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

标签选择器 

作用

    标签选择器可以把某一类标签全部选择出来,比如所有的 <div> 标签和所有的 <span> 标签。

优点

    能快速为页面中同类型的标签统一设置样式。

缺点

    不能设计差异化样式,只能选择全部的当前标签。

类选择器

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

    类选择器 

    语法

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

    <div class=‘red’> 变红色 </div>

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

            ...

    }

类选择器 

注意

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

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

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

② 可以理解为给这个标签起了一个名字,来表示。

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

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

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

⑥ 命名规范:见附件( Web 前端开发规范手册.doc)

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

多类名使用方式

2.4 类选择器 

<div class="red font20">亚瑟</div>

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

    (2) 多个类名中间必须用空格分开

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

.多类名开发中使用场景

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

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

    (3) 从而节省CSS代码,统一修改也非常方便. 

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、CSS介绍 CSS(Cascading层叠 Style样式 sheets表),是用来为网页添加样式的代码 *盒...
    章强_5488阅读 131评论 0 0
  • 【CSS简介】 Css它对html来讲做出了很多的贡献其中有一个很重要的贡献就是将所有标签中跟样式有关的属性都集中...
    黑色的夜阅读 264评论 0 0
  • 一、基础选择器之标签选择器 选择这个结构里的所有这个标签。 二、基础选择器之类选择器口诀: 样式点定义,结构(cl...
    ae7e2869e671阅读 212评论 0 0
  • css初识 CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表),...
    释梦石阅读 317评论 0 0
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    Mr大喵喵阅读 658评论 0 0