css四种选择器总结

css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重。

  做为后端开发者来说,学好css样式也是快速入门各类框架的基础,也是做为一名全栈工程师必备的知 识,下面来说说css中重要的选择器,

      在css中常见的选择器有四种常见,说到选择器就不得不说css引入文件的常见的三种方法,1,内联文件,2,外部文件,3.内嵌文件 ,其中三种常规的例子如下

1,借助link标签来引入“外部文件“,href 则代表其路径文件属性

2,中则是"内嵌文件" 在html /head 标签下面 style之内

3.内联在html代码中被称为"内联文件"。

   之所以讲三种引入样式文件方法,是因为他们与选择器息息相关,

  总结:1,不管哪一种方式,都得先找到 对应元素,对应id,对应class,或是全局通配,才能赋予其css样式。

             2,三种方式存在着优先级,内联>内嵌>外部。

             3,目前较为流行的是外部样式。

1,在html代码中标有 id=“***“时就是 id 选择器,在css样式中则用#号获取该id

      ps; 以#号做开始标志选中赋予其背景颜色黄色 说明#id具有唯一性,

1,在html代码中标有 class=“***“时就是 class 选择器,在css样式中则用.号获取该id

 3,元素选择器中 没有class ,id 只有标签的称为元素 h1-6标签  p 或 div span等 就是个元素

ps:元素之间可以相互找下级元素以逗分割;如下

这个样式包含h1与div元素 都会被显示黄色背景,h1与div之外的不会显示

4,通配*用来做全局的适配常用来初始化:如下:

ps:全部设置背景颜色黄色

总结;在网页排版中可以灵活运用以上四种常见的选择器,繁衍出高级的选择器。

原文地址:https://www.cnblogs.com/ihxm/p/10605733.html

时间: 2024-08-25 11:13:44

css四种选择器总结的相关文章

CSS四种设置方式

上面这张思维导图已经大概的讲明白了四种设置方式的不同点,下面就细入说明一下各自的用法和注意点. 1.嵌入样式表 <html> <head> <title>CSS四种设置方式</title> </head> <body> <p style="color:red;font-size:2cm;background-color:gray; border:2px solid blue">内联样式表</p&g

CSS四种定位及应用

定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道.不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦! 为什么要用定位? 那么定位,最长运用的场景再那里呢? 来看几幅图片,你一定会有感悟! 第一幅图, 小黄色块可以再图片上移动: 第二幅图, 左右箭头压住图片: 第三幅图, hot 再盒子外面多出一块

CSS四种引入方式

第一种直接在属性标签后添加CSS代码,可读性差,不推荐使用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--第一种引入方式--> <div style="color: red;backg

前台html基础标签2表单、超链接 css四种样式 7.7

一.html-表单部分 1.按钮: <input type="button"> 2.文本框: <input type="text"> 3.密码: <input type="password"> 4.单选: <input type="radio" id="male" name="sex" checked="checked">

css三种选择器

1.派生选择器 <html><head><link href="a1.css" type="text/css" rel="stylesheet"></head> <body><h1>ayaya</h1></body></html> h1{color:blue;} 2.id选择器 <html> <head> <l

Css四种样式

1. 2 3 4 5 6.

CSS 四种定位方式比较

定位比较 定位模式 是否脱标占有位置 是否可以边平移 移动位置基准 静态定位(static) 不脱标,正常模式 不可以 正常模式 相对定位(relative) 不脱标,占有位置 可以 相对自身位置移动 绝对定位(absolute) 完全脱标,不占位置 可以 相对于有定位的父级移动 固定定位(fixed) 完全脱标,不占位置 可以 相对于浏览器移动 原文地址:https://www.cnblogs.com/somethingnew/p/11841039.html

css引入、三种选择器

 css的引入方式有三种:行类样式.内部样式.外部样式表 一.行内样式 使用style样式引入css样式. 二.内部样式 在style标签中书写css代码.Style标签写在head中. 三.外部样式表 css代码保存在扩展名为.css的样式表中 html文件引用扩展名为.css的样式表.有两种方式:链接式.导入式. 链接式与导入式的区别 <link> 1.属于XTHML 2.优先加载css文件到页面 @import 1.属于css2.1 2.先加载HTML结构在加载css文件. css三种选

CSS实现和选择器

CSS实现和选择器 本课内容: 一.实现CSS四种方式 1,每个html标签中都有一个style样式属性,该属性的值就是css代码.(针对一个标签)2,使用style标签的方式. 一般都定义在head标签中.(针对多个相同的标签)3,当多个页面使用相同样式时,可将样式单独封装为CSS文件导入 <style type="text/css">@import url("1.css");</style>4,通过HTML头标签中的link标签链接一个C