标签：aabb 标签 透明 文件 选中 order 其他 rgb 多个
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>
标签：aabb 标签 透明 文件 选中 order 其他 rgb 多个
原文地址：https://www.cnblogs.com/zhony/p/10040050.html
