css 引入方式,选择器,选择器的优先级

来源：互联网发布：java实现短信发送编辑：程序博客网时间：2024/04/25 20:25
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css引入方式,选择器,选择器的优先级</title><style type="text/css" >/** * css有3中写法 * 1 ：外联式：：新建css 内部引用 <link href="css 文件路径" rel="">     （主要写法  推荐） * 1）：该写法影响范围比较广，整个站点 * 2）：完全实现了html结构与样的分离（代码可维护性比较好） *  * 2 ：内嵌式  ：在头部的style 中书写 * 1）：只会影响当前页面样式的改变 * 2）：没有实现html结构与样式的完全分离 *  * 3 ：行内式写法 ：直接在标签内些style * 1）：影响只有当前标签 * 2）：没有实现html结构与样式的分离  *//** * 选择器 *1 ：标签选择器 div{},p{},h1{}  * 注意：标签指的是html中的标签 *  * 2 ：类选择器 为标签添加一个class="类名" 例如：<p  class="p-color"></p> .p-color{} * 注意： * 1 ：谁调用谁改变（html） * 2 ：一个标签可以同时调用多个类样式  例如：<p class="p-color p-size">文字1</p> * 3:一个类标签可以被多个标签同时调用  <p class="p-color p-size">文字1</p> ， <div class="p-color">文字1</div> * 类的命名规范： * 1 ：推荐使用有语义的单词组合或者拼音组合定义类名 * 2 ：不推荐使用汉字定义类名 * 3 ：不能以纯数字或者以数字开头定义类名 * 4 ：不能以特殊字符或者以特殊字符开头（“_”除外）定义类名 *  *3：id选择器  <p id="p-color"></p> #p-color{} * 注意： * 1 ：一个标签只能调用一个id样式（身份证） * 2 ：在html标签中，一个标签的id名必须唯一 （以后id选择器一般配合js使用） * 错误写法： * 1:<p id="p-color p-size">文字1</p> * 2：<p id="p-color">文字1</p> ， <div id="p-color">文字1</div> *  * 4：通配符选择器  *{} * 注意：该选择器会将页面中所有的标签选择，一并设置样式。 *  * 5：复合选择器 ：标签名称 .选择器{}  或者    标签名称 #选择器{}  例如 div .aaa() 或  div #aa{} *  * 6：后代选择器 ：div p{}  * 注意： * 1 ：标签之间的关系属于嵌套关系  说明 ：被div标签包裹的p标签 * 2 ：选择器中间必须用空格隔开 *  * 7:并集选择器 ：p,div,span,h1{} * 注意：并集选择器标签之间的关系可以是并列的关系也可以是嵌套关系 *  * 选择器的优先级 ：  * 1 标签选择器 < 类选择器 <  ID选择器 < 行内样式 < !important  * 2 1       10      100    1000   1000以上 */  /**  * 颜色的表达方式 ：4种方式  * 1：直接设置 color：red;  * 2：十六进制方式 color：#00ff;  * 3:rgb设置 color：rgb(0-255,0-255,0-255); red green blue  * 4:rgba color:rgba(0-255,0-255,0-255,0-255,0.1);  * rgba是rgb色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母，Alpha值代表颜色的透明度/不透明度 取值为：0-1之间。  * 透明度设置：  * 1）：color:rgba(0-255,0-255,0-255,0-255,0.5);  * 2）：opacity：0.5;  * 3）；filter:Alpha(opacity=50); //IE8以及更早的浏览器  *   */   #p-color0{ width: 300px;  /* 设置宽度*/ height: 3000px; /* 设置高度*/ line-height: 20px; /* 设置文字的行高*/ line-break: normal; font-size: 20px;  /* 设置文字大小*/  /*font-weight: normal;*/ /* 设置文字为正常显示 用于去掉一些样式*/ font-weight: bold;/* 文字加粗显示*/ /*font-weight: 700;*/ /* 文字加粗 与 bold效果一样 推荐使用*/  font-style: italic ; /* 文字斜体显示*/  font-family: 楷体; /* 文字 字体 汉字方式*/ font-family: simsun; /* 设置文字字体宋体  英文方式*/ font-family: "\5B8B\4F53";  /* 设置unicode编码设置字体*/  color: red;  /* 设置文字颜色*/ background-color: palegreen; /* 设置背景色*/  text-indent: 2em; /* 设置首行缩进两个汉字*/ text-align: center;  /* text-align给块级元素设置，其文本会水平居中 */  }  p1{ /*文字大小为40px  文字字体为宋体*/ font: 40px 宋体; }  p{ /*设置文字   加粗 斜体  大小40px  行高20px 宋体   *   * Font属性联写注意： * ◆该属性中必须有font-size  和 font-family * ◆font-size的值必须放到font-family前         * ◆font-weight 和font-style顺序可以调换 * ◆font-weight 和font-style 放到font-size 和font-family前  * */ font:700 italic  40px/20px 宋体 ; } </style></head><body></body></html>
0 0