加上类的名称 !--此处是html文件--divp class=c1Life is short
标签：
CSS(Cascading Style Sheets)层叠样式表用于修饰HTML标签的样式
CSS注释
一般来说，CSS是一个独立的文件，由于它的内容是修饰HTML标签的样式，为了便利后期的维护和改削，所以我们酬报使用注释说明当前样式的是用于修饰什么内容的
单行注释：/*注释文本*/ 多行注释：就是在单行注释中换行即可 /* 注释1 注释2 */ 养成习惯 /*这是首页的css样式文件（说明css文件的感化）*/ /*页面通用样式*/ /*顶部导航条样式*/ /*侧边菜单栏样式*/CSS语法布局
选择器名 { 属性名:属性值; 属性值1:属性值1; …… 属性值n:属性值n }CSS三种引入方法
1.外部CSS文件(标准使用方法)
<!--1.外部CSS文件(标准使用方法)--> <link rel="stylesheet" href=http://www.mamicode.com/"myfirstcss.css">2.在head标签使用style标签编写CSS代码
<head> <meta charset="UTF-8"> <title>CSS样式</title> <!--2.在head标签使用style标签书协CSS代码--> <style> P { color: indianred; } </style> </head>3.标签内部通过style属性直接书写对应的样式(不保举使用)
<div> <p style="color: aqua;">君不见,黄河之水天上来,奔流到海不复回</p> <p>君不见,高堂明镜悲鹤发,朝如青丝暮成雪</p> </div>这三者的优先级为
标签内部style属性 > (head标签中的style标签 > link标签引入外部)
ps：head标签中的style标签 和 link标签引入外部之间的优先视HTML的执行挨次而言，最后执行的优先级高
CSS样式的使用分为两步：
? 1.查找要修饰的标签
? 2.设置修饰的内容
CSS选择器
根基选择器：元素选择器、ID选择器、类选择器，通用选择器(不保举使用)
标签选择器
最常见的 CSS 选择器是标签选择器。换句话说，文档的标签就是最根基的选择器。选择器凡是将是某个 HTML标签，好比p、h1、div、a，，甚至可以是 html 自己
/*将P标签中的文本颜色设置成deepskyblue*/ p { color: deepskyblue; }ID选择器
ID是指标签的ID名称，ID选择器的定名法则，必需以#开头，加上标签的ID名称
<!--此处是html文件--> <p id="text">君不见,高堂明镜悲鹤发,朝如青丝暮成雪</p> /*此处是css文件*/ /*将id名称为text的元素中的字体加粗*/ #text { font-weight:bold; }类选择器
类选择器允许以一种独立于标签的方法来指定样式。类选择器可以单独使用，也可以与其他标签结合使用。定名法则，以.开头，加上类的名称
<!--此处是html文件--> <div> <p class="c1">Life is short,you need python</p> <h1 class="c1">The test was very difficult</h1> </div> /*此处是css文件*/ /*将class="c1"的元素中的文本颜色设置成chocolate*/ .c1 { color: chocolate; }ps：类名建议不要用数字开头，有些浏览器不兼容；当前标签中有多个class属性，使用空格分隔断绝分手
通用选择器，用 *暗示，暗示整个页面的HTML都是用该样式
* { color:purple; }组合选择器：儿女选择器、儿子选择器、毗邻选择器、弟弟选择器
儿女选择器
儿女选择器又称为包罗选择器，用于修饰某个标签内部中所有的标签(包孕级联标签)
<!--此处是html文件--> <div> <div> <!--该p标签的文本颜色是红色--> <p>Life is short,you need python</p> </div> <!--该p标签的文本颜色是红色--> <p>The test was very difficult</p> </div> <p>People can gain knowledge through reading books</p> /*此处是css文件*/ /*将div标签内部中所有p标签的文本设置为红色*/ div p{ color:red; }儿子选择器
儿子选择器又称为子元素选择器，与儿女选择器对比，儿子选择器只能选择某标签子标签的标签。
当我们不想修饰任意的儿女标签，而是但愿缩小范畴，只选择某个标签的子标签，就可以使用儿子选择器
<!--此处是html文件--> <div> <div> <p>Life is short,you need python</p> </div> <!--该p标签的文本颜色是蓝色--> <p>The test was very difficult</p> </div> <p>People can gain knowledge through reading books</p> /*此处是css文件*/ /*将div标签的子标签p标签的文本设置为blue*/ div p{ color:blue; }毗邻选择器
选择紧接在当前标签后的标签，且二者有不异父标签
<!--此处是html文件--> <div> <div> <p>Life is short,you need python</p> </div> <!--该p标签的文本颜色是绿色--> <p>The test was very difficult</p> </div> <!--该p标签的文本颜色是绿色--> <p>People can gain knowledge through reading books</p> /*此处是css文件*/ /*告急接在div标签后，并跟该div标签具有同一个父标签的p标签的文本颜色为绿色*/ div+p { color:green; }弟弟选择器
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32954.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")