CSS层叠样式表01
2021-05-05 17:29
标签：hit 浏览器 换行 字体设置 首页 head you 执行顺序 dia 用于修饰HTML标签的样式 CSS注释 一般来说，CSS是一个独立的文件，由于它的内容是修饰HTML标签的样式，为了方便后期的维护和修改，所以我们人为使用注释说明当前样式的是用于修饰什么内容的 CSS语法结构 CSS三种引入方式 1.外部CSS文件(标准使用方式) 2.在head标签使用style标签编写CSS代码 3.标签内部通过style属性直接书写对应的样式(不推荐使用) 君不见,黄河之水天上来,奔流到海不复回 君不见,高堂明镜悲白发,朝如青丝暮成雪 这三者的优先级为 标签内部style属性 > (head标签中的style标签 > link标签引入外部) ps：head标签中的style标签 和 link标签引入外部之间的优先视HTML的执行顺序而言，最后执行的优先级高 CSS样式的使用分为两步： ? 1.查找要修饰的标签 ? 2.设置修饰的内容 CSS选择器 基本选择器：元素选择器、ID选择器、类选择器，通用选择器(不推荐使用) 最常见的 CSS 选择器是标签选择器。换句话说，文档的标签就是最基本的选择器。选择器通常将是某个 HTML标签，比如p、h1、div、a，甚至可以是 html 本身 ID是指标签的ID名称，ID选择器的命名规则，必须以 君不见,高堂明镜悲白发,朝如青丝暮成雪 类选择器允许以一种独立于标签的方式来指定样式。类选择器可以单独使用，也可以与其他标签结合使用。命名规则，以 Life is short,you need python ps：类名建议不要用数字开头，有些浏览器不兼容；当前标签中有多个class属性，使用空格分隔 组合选择器：后代选择器、儿子选择器、毗邻选择器、弟弟选择器 后代选择器又称为包含选择器，用于修饰某个标签内部中所有的标签(包括级联标签) Life is short,you need python The test was very difficult People can gain knowledge through reading books 儿子选择器又称为子元素选择器，与后代选择器相比，儿子选择器只能选择某标签子标签的标签。 当我们不想修饰任意的后代标签，而是希望缩小范围，只选择某个标签的子标签，就可以使用儿子选择器 Life is short,you need python The test was very difficult People can gain knowledge through reading books 选择紧接在当前标签后的标签，且二者有相同父标签 Life is short,you need python The test was very difficult People can gain knowledge through reading books 修饰紧跟在当前标签后，且跟当前标签在同一级所有的标签样式 The test was so easy Life is short,you need python The test was very difficult good good study，day day up People can gain knowledge through reading books 属性选择器 修饰所有具有某个属性名的标签 The test was so easy Life is short,you need python Life is short,you need python People can gain knowledge through reading books CSS层叠样式表01 标签：hit 浏览器 换行 字体设置 首页 head you 执行顺序 dia 原文地址：https://www.cnblogs.com/xiaodan1040/p/12105264.htmlCSS(Cascading Style Sheets)层叠样式表
单行注释：/*注释文本*/
多行注释：就是在单行注释中换行即可
/*
注释1
注释2
*/
养成习惯
/*这是首页的css样式文件（说明css文件的作用）*/
/*页面通用样式*/
/*顶部导航条样式*/
/*侧边菜单栏样式*/选择器名 {
属性名:属性值;
属性值1:属性值1;
……
属性值n:属性值n
}
/*将P标签中的文本颜色设置成deepskyblue*/
p {
color: deepskyblue;
}
#开头，加上标签的ID名称
/*此处是css文件*/
/*将id名称为text的元素中的字体加粗*/
#text {
font-weight:bold;
}
.开头，加上类的名称
The test was very difficult
/*此处是css文件*/
/*将class="c1"的元素中的文本颜色设置成chocolate*/
.c1 {
color: chocolate;
}
*表示，表示整个页面的HTML都是用该样式* {
color:purple;
}
/*此处是css文件*/
/*将div标签内部中所有p标签的文本设置为红色*/
div p{
color:red;
}
/*此处是css文件*/
/*将div标签的子标签p标签的文本设置为blue*/
div p{
color:blue;
}
/*此处是css文件*/
/*紧急接在div标签后，并跟该div标签具有同一个父标签的p标签的文本颜色为绿色*/
div+p {
color:green;
}
/*此处是css文件*/
/*在div标签后且在同一级的p标签的文本颜色设置为aquamarine*/
div ~ p {
color: aquamarine;
}
/*具有today属性的标签文本字体设置为12px，文本颜色设置为coral*/
[today] {
font-size: 12px;
color: coral;
}
/*具有today属性并且属性值叫sunday的标签背景颜色设置为lightskyblue，文本颜色设置为white*/
[today="sunday"] {
background-color: lightskyblue;
color: white;
}
/*具有today属性并且属性值叫friday的p标签背景颜色设置为aquamarine，文本颜色设置为chocolate,字体大小设置成20px*/
p[today="friday"] {
background-color: aquamarine;
color: chocolate;
font-size: 20px;
}