CSS选择符与嵌入方式


CSS英文全称为Cascading Style Sheets(层叠样式表),它主要用于定义HTML内容在浏览器内的显示样式。使用CSS有一个好处就是通过定义某个样式可以让不同网页位置的字体有着统一的属性(字体大小、字体颜色、字体粗细等)。

CSS的优势有很多,CSS代码结构清晰、容易被搜索引擎搜到,大大缩减了页面代码,缩短改版时间。CSS具有强大的字体控制和排版能力,非常易于编写,有很强的易用性,一处设计多处调用。用CSS进行样式编辑可以把表现和内容分离,将设计部分单出取出存放在一个文件中,更好的控制页面布局。

CSS样式由选择符声明组成,声明由属性组成。每一条CSS样式声明(定义)由两部分组成:选择符样式英文大括号之前部分就是选择器,选择器指明了大括号中的"样式"的作用对象,也就是"样式"作用于网页中的哪些元素

选择符:指明网页中要应用样式规则的元素,也被叫做选择器。

声明:英文大括号中的就是声明,属性和值之间用英文冒号分隔,当有多条声明的时候,中间可以英文分号分隔。

注意:最后一条声明可以没有分号,但是为了以后修改方便通常我们也会加上;为了使用样式更加容易阅读,可以将每条代码写在一个新行内。

CSS中的注释语句用/*注释语句*/来标明;HTML中使用<!-注释语句->

p{ color:blue}    //p:选择符;color:属性;blue:值
p{font-size:12px;color:blue;}
/*CSS的代码注释样式*/
p{
    font-size:12px;
    color:blue;
}

 

CSS代码的嵌入方式有三种,分别是内联式、嵌入式外部式三种。

内联式就是CSS样式表直接把CSS代码写在现有的HTML标签中,CSS样式代码要写在style=" "的双引号之中,多条CSS样式代码设置可以写在一起,中间用分号隔开。

嵌入式就是可以把CSS代码写在<style type="text/css"></style>标签之间,嵌入式CSS必须写在<style></style>之间,并且一般情况下嵌入式CSS样式写在<head></head>之间。

<style type="text/css">
span{
    color:red;
}
</style>

外部式CSS也称为外联式CSS,就是把CSS代码写在一个单独的外部文件中,文件以.css为扩展名,在<head>内使用<link>标签将css样式文件链接到HTML文件内。

注意:CSS样式文件名称以有意义的英文字母命名,如main.css;rel="stylesheet" type="text/css"是固定写法不可修改;<link>标签位置一般写在head标签内。

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

CSS样式插入方式的优先级是:内联式 > 嵌入式 > 外部式;嵌入式 > 外部式的前提是嵌入式CSS样式的位置一定在外部式的后面,就是离被设置元素越近优先级别越高。


 

标签选择器是HTML代码中的标签

p{font-size:20px;line-height:1.6em;}

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。类选择器的使用方法第一步使用合适的标签把要修饰的内容标记起来,第二步使用class="类选择器名称"为标签设置一个类;第三步设置类选择器CSS样式。

类选择器名称{CSS样式代码;}
<span>这是啥?</span>
<span class="stress">这是啥?</span>
//类前面要加入一个英文圆点 
.stress{color:red;}    

ID选择器类似于类选择器,但有些不同:为标签设置id="ID名称",不是设置class="类名称";ID选择符的前面是井号(#),而不是英文圆点。

类选择器和ID选择器的相同点:可以应用于任何元素

类选择器和ID选择器的不同点:ID选择器只能在文档中使用一次,与类选择器不同,在一个HTML文档中,ID选择器能且仅能使用一次,类选择器可以使用多次;可以使用类选择器词列表方法为一个元素同时设置多个样式,我们可以为一个元素同时设置多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用ID词列表)。

子选择器">",用于选择指定标签元素的第一代子元素

.animal> sheep{border:1px solid red;}

包含选择器即加入空格,用于选择指定标签元素下的后辈元素。包含选择器也称之为后代选择器,它与子选择器的区别是子选择器仅是指它的直接后代,后代选择器是作用于所有自己的后代元素。后代选择器通过空格来进行选择,而子选择器是通过">"进行选择。(>作用于元素的第一代后代,空格作用于元素的所有后代)。

.first span{color:red;}

通用选择器是使用星号(*)指定,它的作用是匹配HTML中所有的标签元素,它是功能最强大的选择。

*{color:blue;}

伪类选择器允许给HTML不存在的标签设置样式(标签的某种状态)。

a:hover{color:blue;}

当为HTML中多个标签元素设置同一个样式时,可以使用分组选择符(,)

h1,span<color:blue;>
等同于
h1{color:blue;}
span{color:blue;}

 

 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值