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

目录

  • CSS(Cascading Style Sheet)
  • CSS注释
  • CSS语法结构
  • CSS的三种引入方式
  • 选择器
    • 伪类、伪元素选择器速查
  • CSS选择器优先级*****
    • 选择器相同的情况下
    • 选择器不同的情况下
    • 选择器权重
    • 样式调整技巧

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

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选择器 > 类 > 标签 ...

选择器权重

样式调整技巧

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

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

原文地址:https://www.cnblogs.com/suwanbin/p/11462645.html

时间: 2024-10-29 04:47:25

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

前端——CSS的引入方式、选择器

前端--CSS的引入方式.选择器 什么是CSS? 层叠样式表(就是用来调节标签的样式) CSS注释 /*单行注释*/ /*多行注释1 多行注释2 多行注释3 */ 注释的使用 css应该是一个独立的文件 /*页面通用样式*/ /*顶部导航栏样式*/ /*侧边菜单栏样式*/ -- css语法结构 选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;--} css三种引入方式 外部css文件(最正规的书写方式) /*mycss*/ /*这是一个非常牛逼的页面的css样式文件*/ /

前端之CSS的属性引入方式、选择器、选择器优先级

目录 1011 前端之CSS的属性引入方式.选择器.选择器优先级 一.CSS介绍 二.CSS语法 2.1CSS实例 2.2 CSS注释 三.css属性的引入方式 3.1 行内样式 3.2 内部样式 3.3 外部样式 四.CSS选择器 4.1 元素(标签)选择器 4.2 id选择器 4.3 类选择器 4.4 通用选择器 4.5 后代选择器 4.6 儿子选择器 4.7 毗邻选择器 4.8 兄弟选择器 4.9 属性选择器 4.10 分组和嵌套选择器 4.11 伪类选择器 4.12 伪类元素选择器 五.

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 ???叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 ????特点: ??????1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠 ??????2.使数据和

2015-09-21CSS:引入方式、选择器、注释、文字样式

1.HTML中引入CSS的方式 HTML中引入CSS的样式有4种:行内式.内嵌式.导入式和链接式. ⑴行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. ⑵嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <style type="text/css"> 这里写css样式 &l

前端-CSS-介绍及三种引入方式

我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.是时候做出改变了,所以CSS就出现了. CSS的出现解决了下面两个问题: 将HTML页面的内容与样式分离. 提高web开发的工作效率. 什么是CSS? CSS是指层叠样式表(Cascading Style Shee

浅谈CSS,引入方式,选择器

全称Cascading Style sheets ,中文名称:层叠样式表/级联样式表.CSS就是给我们的HTML网页加样式的东西,它可以让我们的html网页变得更加绚丽多彩,它有三种引入方式. 第一种内嵌式:直接写在我们的html标签里面的,如:  <div style="属性:属性值;"> </div>        这就是内嵌也叫嵌入. 第二种内联写法:在我们的html网页里面的head里面添加一个style标记,然后在里面写,如: <head>

CSS的引入方式及选择器

CSS的引入方式第一种:在head中 <style></style> 嵌入式第二种:在head中 <link href="index.css" rel="stylesheet"> 链接式 (先加载css,再加载html)推荐第三种:在head中 <style>@import "index.css";</style>> 导入式(先加载html,再加载css)第四种:直接在html标签

前端css -- 引入方式和选择器

引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本

胡博君讲解CSS中注释失效的原因

在Dreamweaver自动生成的网页中,head中的样式表往往是这样的形式: <style type="text/css"> <!-- ...... --> </style> 在样式表的开头和结尾会自动添加一套html注释标记:<!--和-->.如果以为这个跟html的注释标记是一样,用这个写注释,会导致样式表定义失效. 当<!--后面加上字之后,下面的内容就全被忽略了,直到</style>结束. 这是一个很容易被忽视