初始CSS

语法:

选择器

        选择器 { 声明1;声明2;…… }

        备注:CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上。

HTML中引入CSS的三种方式

行内样式:

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px; color:green;">直接在标签中设置的样式</p>

内部样式:

CSS代码写在<head>的<style>标签中

<style>

        h1{color: green; }

</style>

外部样式:

        CSS代码保存在扩展名为.css的样式表中,HTML文件引用扩展名为.css的样式表,

有两种方式:链接式和导入式

链接式:

        <head>

                <link href="style.css" rel="stylesheet" type="text/css" />

        </head>

导入式:

        <style>

        /*要写在style标签的最前面,否则不会生效 或者直接在外部css文件中直接使用*/  

        @import url('./style.css');

        </style>

引入方式的优先级

        行内样式>内部样式/外部引入

        就近原则:哪一种设置方式距离元素最近,谁的优先级更高;

类选择器       

<标签名 class= "类名称">标签内容</标签名>

.类名称 {

        样式...

}

备注: 

        1、使用类选择器必须给标签设置class属性,且同样样式的class值要一致。

        2、使用类选择器时,不能少了前面的小数点

        3、一个标签的class值可以有多个,使用空格分开

<h1 class="bgColorBlue">

        HelloWorld

</h1>

        <h1 class="color-red bgColorBlue borderGreen" id="width120">

        HelloCSS3

</h1>

        <h1 class="color-red bgColorPink">

        HelloKD38

</h1>

        <a href="" class="bgColorPink">百度一下百度一下百度一下</a>

               

.color-red {

        color: red;

}

.bgColorBlue {

        background-color: blue;

}

.borderGreen {

        border: green solid 3px;

}

.bgColorPink {

        background-color: pink;

}

ID选择器

<标签名 id= “ID选择器名称">标签内容</标签名>

#id名称 {

        样式...        

}

备注:

        1、使用ID选择器必须给标签设置id属性,且同样样式的id值要一致。

        2、使用ID选择器时,不能少了前面的#

        3、一个标签的id值只能有一个

        4、同一个页面中,id属性的值不能重复

全选择器

* {

        样式...

}

备注:全选择器会对所有标签都生效

补充:
颜色十六进制:http://www.mamicode.com/info-detail-2278771.html
样式大全:
https://www.gxlcms.com/qianduan-376909.html
https://blog.csdn.net/qwqc262/article/details/108930286

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值