CSS样式和选择器

最新推荐文章于 2024-05-03 09:30:00 发布

开心死啦.

最新推荐文章于 2024-05-03 09:30:00 发布

阅读量996

点赞数 4

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_46582485/article/details/125028840

版权

div标签（盒子）

        div标签是没有语义的,是DIV+CSS时代的核心标签,单纯进行内容标签的容纳
        div是dvision的缩写,意思是分割分区,我们可以利用DIV来给页面划分不同的区域,呈现不同内容
    语法：

<div>
   <p> <span>内容</span>内容 </p>
</div>

span标签

span标签是没有语义的通常来组合行内元素，以便通过样式来格式化它们。
span没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。
语法：

<p><span>some text.</span>some other text.</p >

CSS（Cascading Style Sheets) 层叠样式表

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS可以帮助调整排版布局的展现美化标签和内容提高版面的信息密度加强信息的冲击力和直观性

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3；">内容</标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
   选择器{ 属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type="text/CSS" 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

外部样式表（外链式)

链入式是将所有的样式放在一个或多个以CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径" rel=”stylesheet”/>
</head>

注意：link是个单标签
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

三种样式表总结(位置)

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

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

 h1 { color:red; font-size:25px;}

选择器 { 属性 : 属性值 ; 属性 : 属性值 : }
在上面的样式规则中：
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文" : "连接。
5.多个“键值对“之间用英文“ ; " 计进行区分。
可以用段落和表格的对齐的演示。

选择器(重点)

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
选择器干啥的？选择标签用的

这就用到基础选择器组

CSS基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，具体基本语法格式如下：

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}或者
元素名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。
标签选择器可以把某一类标签全部选择出来 div span

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

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

标签调用的时候用 class=“类名” 即可
类选择器最大的优势是可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
命名规范
1.命名需要是具备语义性的单词，不能用数字拼音符号
正确示范：wrap description title content
错误示范：aaaa al $ we 8ddop
2.命名需要多个单词连接的情况下，标记语言中可以便用进行连接不能直接单词拼接或者驼峰命名注意：书写风格必须统一不容许出现_- 一起使用的情况推荐便用 -
正确示范：header-nav content-left slide-bar
错误示范： headernav slideBar Contentleft
3.命名需要进行适当的缩写，单词连接层级不要超过4层
正确示范：head-tit_ico
错误示范：header-title-left-logo-icon

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。
注意：
1.样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。
2.各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="melon green fz20">西瓜</div>
<div class="melon cyan">冬瓜</div>
<div class="melon yellow">南瓜</div>

id选择器

id选择器使用”#“进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class）好比人的名字，是可以多次重复使用的，比如张杰岳云鹏姚琛
id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
ld选择器和类选择器最大的不同在于使用次数上。

通配符选择器

通配符选择器用*号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素，其基本语法格式如下：

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

*{
   margin : 0 ;  /*定义外边距*/
   padding : 0;  /*定义内边距*/
}

通配符选择器一般用于DEMO页面的统一清除默认margin和padding 其他地方应用很少

开心死啦.

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS样式和选择器

div标签（盒子）div标签是没有语义的,是DIV+CSS时代的核心标签,单纯进行内容标签的容纳div是dvision的缩写,意思是分割分区,我们可以利用DIV来给页面划分不同的区域,呈现不同内容语法：<div> <p> <span>内容</span>内容 </p></div>span标签span标签是没有语义的通常来组合行内元素，以便通过样式来格式...
复制链接

扫一扫