专栏首页小码农漫漫积累路前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

目录

本篇博客绝大多数内容来源网上,感谢作者的无私分享~

CSS(Cascading Style Sheet)

用来调节标签样式的,又称层叠样式表

CSS注释

/* 单行注释 */

/* 
多行注释
*/


经典写法
/* 这是购物车页面的样式表(一般放css文件的第一行,声明该文件是干啥的) */


/* 顶部导航条开始 */
    ...顶部导航条样式代码...
/* 顶部导航条结束 */

CSS语法结构

选择器 {
    属性1: 值;
    属性2: 值;
    属性3: 值;
}

#content {
    background-color: red;
}

CSS的三种引入方式

  • 文件导入式(项目规范推荐使用)
  • 在head标签中的style标签里书写
  • 嵌入式/行内式(标签上直接写,最不推荐使用)
1.文件导入式(最规范的形式)
<link rel="stylesheet" href="mycss.css"/>

2.head标签内 写style 标签
<style>
    p{
        color: red
    }
</style>

3.嵌入式
<p style="color: red">加油,努力</p>

选择器

这一块儿内容可参考 CSS Selectors(可选择中文),切换左侧目录查看,可以完全不看下面的内容

我们通过选择器来选择,指定标签,给标签添加样式

  • 基本选择器 标签选择器、类选择器、id选择器、全局选择器、兄弟选择器、后代选择器
  • 属性选择器
  • 组合选择器
  • 伪元素选择器
  • 伪类选择器

选择器可嵌套(#d1 .c2 a:hover{...} 给id为d2下的class为c2的a标签的hover状态设置属性)

/* ######### 标签选择器 ########## */
元素(标签)选择器(<p></p>)
p{
    color: red;
}

/* ######### 类选择器 ########## */
类选择器(class="c1")
.c1{
    color: red;
}

/* ######### id选择器 ########## */
id选择器(id="d1")
#d1{
    color: red;
}

/* ######### * 全局选择器 ########## */
* 全局选择器(直接改所有的 ,用的不多)
*{
    color: red;
}

/* ######### 后代选择器 ########## */
(空格)后代选择器(div下面的span、div下的p的span)
div span{
    color: red;
}
/* ######### 子代选择器 ########## */
子代选择器(div下面的span)
div>span{
    color: red;
}

/* ######### 毗邻选择器 ########## */
毗邻选择器(紧挨着的,下面额)
div+span{
    color: red;
}
/* ######### 弟弟选择器 ########## */
弟弟选择器(同级别的下面所有的标签)
div~span{
    color: red;
}


/* ######### 属性选择器 ########## */
属性选择器
    具有某个属性名
    某个属性名及属性值
    具有某个属性名及属性值某个标签

/*[hobby]找只要包含某个属性名的标签*/
[hobby]{
    background-color: red;
}

[hobby="jdb"]{
    color="jdb";
}

/*找具有属性名是hobby 并且值是 jdb的 input标签*/
input[hobby="jdb"]{
    color: red;
}

/* ######### 选择器分组 ########## */
选择器分组
p, span{
    color: red;
}
最规范的写法:
p,
span{
    color: red;
}

/* ######### 选择器嵌套 ########## */
选择器嵌套(所有选择器都可以嵌套(案例:id选择器、class选择器、标签选择器))
#d1 .c1 span{
    color: red;
}


/* ######### 伪类选择器 ########## */
伪类选择器(可以再了解一下)
:link 未访问时  :hover 鼠标覆盖/悬浮  :active 鼠标按下  :visited 访问后  :focus 获取焦点
a:hover{
    color: red;
}

/* ######### 伪元素选择器 ########## */
伪元素选择器
:first-letter第一个字(母)  :before(最前面)  :after(最后面)  :first-child(第一个元素)
p:first-letter{
    color: red;
}
p:before{
    content: '^';  /*css加上去的,页面上无法选中*/
    color: red;
}
p:after{  /*可以用来解决浮动问题*/
    content: '&';  /*在末尾添加内容*/
    color: red;
}

伪类、伪元素选择器速查

由于id选择器、类选择器等普通选择器比较熟悉,所以就整理一个伪类、伪元素选择器方便后期快速查阅 先放一个别人整理好的吧,后期再自己整理一下:CSS选择器完整参考手册

这里要放个表格,整理出来方便快速查找

CSS选择器优先级*****

参考:优先级是如何计算的?(篇幅不长,案例也十分简明,可以完全不看下面的内容) 后期添加样式,很多样式不生效的原因可能就是没有注意优先级

选择器相同的情况下

就近原则

选择器不同的情况下

优先级:

style > id选择器 > 类 > 标签 ...

选择器权重

样式调整技巧

先划分页面布局,搭出骨架再细节化

谷歌浏览器调整样式看页面效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python-面向对象速查表-内置方法-内置函数-内置属性(只整理了部分内容)

    suwanbin
  • python模块导入-软件开发目录规范-01

    tips:现在是高效率社会,谁写的快,功能强大,bug少,就是NB,不是说都自己纯手撸出来才NB

    suwanbin
  • python-优酷系统管理员视图粗糙版(无详细注释)

    手动创建数据库 youku_demo, 需配置数据库编码 utf8 (安装时配置好了命令行中就不用管)

    suwanbin
  • 前端学习 第2周 第1天

    Joel
  • CSS复合选择器

    CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。

    乐心湖
  • Web前端学习 第2章 网页重构5 css选择器进阶

    上一节我们已经掌握了常用css选择器和css的一些常用属性,本节我们进一步扩展css选择器的内容包括内容如下:

    学习猿地
  • 前端基础-CSS伪类选择器和类选择器一起使用

    cwl_java
  • 爬取数据不是非要Python

    最近有朋友问是否可以不用Python编程就能爬取数据并分析,想起来正好之前写了一篇文章,关于Web Scraper的使用,由于之前忘记标记原创,今天就再发一次。...

    用户1564362
  • CSS基础

    css:Cascading Style Sheet 层叠样式表,简而言之 就是css的样式 是可以叠加的。默认 是根据css选择器的权重,按权重进行叠加,权重值...

    lesM10
  • CSS选择器是如何确定优先级的?

    先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

    dys

扫码关注云+社区

领取腾讯云代金券