<!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>
css 引入方式,选择器,选择器的优先级
最新推荐文章于 2024-08-02 11:47:49 发布