您当前的位置: 首页 >  前端

HM-hhxx!

暂无认证

  • 5浏览

    0关注

    123博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

前端学习第六课(CSS初识及基础选择器)

HM-hhxx! 发布时间:2022-01-04 11:14:05 ,浏览量:5

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

1.引入CSS样式表 1.1行内式(内联式)

基本语法如下:

  内容

例如:

1.2内部样式表(内嵌式样式表)

是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 。

基本语法如下:

    选择器(选择的标签) {       属性1: 属性值1;       属性2: 属性值2;       属性3: 属性值3;     }

如:

 

        div {

            width: 300px;

            height: 200px;

            background-color: blanchedalmond;

        }

   

1.3CSS文件引入方式

称链入式,是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中。

基本语法如下:

 

 1.4总结 样式表优点缺点使用情况控制范围行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多) 2.CSS选择器 2.1标签选择器

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

基本语法:

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如:

        div{

            width: 100px;

            height: 100px;

            background-color: aqua;

        }

        h1{

            width: 100px;

            height: 100px;

            background-color: bisque;

        }

        p{

            width: 100px;

            height: 100px;

            background-color: rgb(219, 82, 27);

        }

   

2.2类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名. 多个类名时,各个类名中间用空格隔开。

基本语法:

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

多类名语法: .类名1 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......} .类名2 {属性4:属性值4; 属性5:属性值5; 属性6:属性值6; ......} 标签调用的时候用: class = "类名1 类名2"

例如:

 

        .vip{

            /* color设置文字颜色 */

            color: crimson;

            /* 字体加粗 */

            font-weight: bolder;

        }

        .normal{

            color: darkgray;

            font-weight: normal;

        }

   

显示效果如下:

2.3id选择器

id选择器使用#进行标识,后面紧跟id名

基本语法格式如下:

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 

例如:

        div{

            width: 100px;

            height: 100px;

            line-height: 100px;

            text-align: center;

        }

        #user1{

            background-color: darkgray;

            color: darkseagreen;

        }

   

user1

实现效果如下:

2.4通配符选择器

通配符选择器用*号表示, * 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。

语法格式如下:

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2.5选择器总结 选择器作用缺点使用情况用法标签选择器可以选出所有相同的标签,比如p不能差异化选择较多p { color:red;}类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav { color: red; }id选择器一次只能选择器1个标签只能使用一次不推荐使用#nav {color: red;}通配符选择器选择所有的标签选择的太多,有部分不需要不推荐使用* {color: red;}

关注
打赏
1663160980
查看更多评论
立即登录/注册

微信扫码登录

0.0730s