CSS的使用方式
???1. 行内样式(内联样式)
???????在HTML标签中加style属性，值写css代码
???????例：
1 <p style="color:red; font-size:50px"></p>
2. 内部样式
将css代码写在style标签中，style标签对一般放在head头里面
???????????选择器{css代码}
???????????例：
p{background:lime;}3. 外部样式
1 <link rel="stylesheet" href="css的文件路径" />
4. @import 导入外部css样式
需要将语句写在style标签对的第1行
???????例：
1 <style>@import ‘./style.css‘;</style>
css的代码概念
属性:值;
???多条代码之间用分号隔开
???最后一条的分号可以省略
全局属性(标准属性)：可以加在任何一个标签身上，有style/id/class/title
CSS的注释
???/* 注释内容 */
css使用方式的优先级
???行内样式 > 其他
???其他：下面的会覆盖上面的
css的长度单位
???px 像素，屏幕显示的最小表示单位
???em 倍数，2em 两倍
???% ?百分比，100% == 1em ??200%两倍
???s ?秒，css3的过渡效果会用到
???deg 度，css3的2D变换的时候会用到
???in 英寸，1英寸=96px
???pt 磅
???mm/cm 毫米/厘米
颜色单位
???1. 颜色的英文单词colorname
???????red/green/blue/pink/black...
???2. 十六进制方式 0~9a~f
???????#红 绿 蓝
???????#ff 00 00 -> 简写 #f00
#abc -> #aabbcc
???????#aabbcd -> 不能简写
???3. rgb()方式
???????rgb(红, 绿, 蓝);
???????数字：rgb(0~255, 0~255, 0~255);
???????百分比：rgb(0%~100%, 0%~100%, 0%~100%)
???4. rgba()方式
???????rgba(红, 绿, 蓝, 透明度);
???????透明度： 0~1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>css的基本语法</title> 6 ?7 ????<style> 8 ????????p{color:blue;} 9 ????</style>10 11 ????<!-- 外部样式 -->12 ????<link rel="stylesheet" href="style.css">13 ????14 </head>15 <body style="font-size:50px">16 ????<!-- p标签默认为16px -->17 ????<p style="color:green;font-size:2em">这周日你有空吗？</p>18 ????<p style="font-size:32px">这周日你有空吗？</p>19 ????<p>这周日你有空吗？</p>20 ????<p style="font-size:1in">这周日你有空吗？</p>21 ????22 ????<hr>23 ????<!-- 颜色 -->24 ????<p style="color:#369">女神，我要给你做牛做马！</p>25 ????<p style="color:rgb(0,0,255)">女神，我要给你做牛做马！</p>26 ????<p style="color:rgba(0,0,255, 0.5)">女神，我要给你做牛做马！</p>27 </body>28 </html>css的选择器
???标签选择器
???????通过标签名选中对象
???class类选择器
???????给HTML标签加class属性，值自己取；在内部或者外部样式中通过.class名选中对象
???id选择器
???????给HTML标签加id属性，值自己取；在内部或者外部样式中通过#id名选中对象
???????必须保证id值的唯一性
???*通配符选择器
???????可以匹配页面上的任何一个元素
选择器的优先级
???id选择器 > class选择器 > 标签选择器
取名的规范：
???1. 尽量由字母数字下划线组成
???2. 不要以数字开头
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>css的选择器</title> 6 ????<style> 7 ????????/*通配符选择器*/ 8 ????????*{border:5px solid lightblue;} 9 10 ????????/*id选择器*/11 ????????#two{color:blue;}12 ????????/*class类选择器*/13 ????????.one{color:green;}14 ????????/*标签选择器*/15 ????????p{color:red;}16 ????????17 ????????.san{font-size:25px;}18 ????????#si{font-size:30px;}19 ????</style>20 </head>21 <body>22 ????<!-- class可以同时使用多个 -->23 ????<p id="two" class="one">君子成人之美，小人夺人所爱</p>24 ????<p>君子成人之美，小人夺人所爱</p>25 ????<p id="kangyushenaizhewangru">君子成人之美，小人夺人所爱two</p>26 ????<p>君子成人之美，小人夺人所爱</p>27 ????<p class="one san">君子成人之美，小人夺人所爱</p>28 </body>29 </html>CSS知识梳理01
原文地址：https://www.cnblogs.com/zhony/p/10040050.html