CSS的基础
-
CSS美化HTML，布局网页
-
CSS最大的价值：由HTML专注去做结构呈现，样式给CSS，结构（HTML)与样式（CSS）相分离
-
CSS主要由选择器以及一条或多条声明
-
在<head></head>中实现CSS在<body></body>实现HTLM
-
语法格式：选择器{做什么}
-
<head> <style>p {color: red;//冒号是小写的，分号是大写的font-size: 12px;//冒号是小写的，分号是大写的.字体的大小} <style> </head> <body><p>有点意思</p> </body> -
空格规范
-
属性值前面，冒号后面，保留一个空格
-
选择器和大括号中间保留空格
-
选择器分为基础选择器和复合选择器
-
基础选择器分成标签选择器，优点是能快速为页面中同类型的标签统一设置样式
-
类选择器可以单独选一个或几个标签
<style>
.red{color: red;//color: #ccooff;变成16进制的颜色双击可任意选取颜色
}
</style>
<body><p class="red">是看得见</p><p>是看得见</p><p>是看得见</p>
</body>-
可以理解为这个标签起了一个名字，来表示
-
长名称或词组可以使用中横线来为选择器命名
-
不能使用纯数字、中文等命名，尽量使用英文字母来表示
-
多类名的使用方式
<style>.red{color: red;}.green{font-size: 100px;}</style><body><p class="red green">是看得见</p>//可以同时使用red和green两个类。注意两个类中间要空格分开<p>是看得见</p><p>是看得见</p></body>-
使用多类名可以将宽长放一个类，颜色放一个类
-
id选择器样式#定义，结构id调用，只能调用一次，有标签使用了，别的标签不能使用
-
#pink{color: red; } <div id="pink"></div> -
同配符选择器
-
*{color: red; } <body></body>里面的所有的内容自动变成红色 -
CSS的字体系列
-
font-family属性定义文本的字体系列
-
<head> <style>p{font-size: '微软雅黑';font-weight: bold;//给字体加粗font-weight: 700;//开发的时候写数字。700等于加粗font-weight；400;//400等于不加粗等于normal开发写数字}p{font-family: 'Micorsoft YaHai', Arial,Helvetica;} </style> </head> <body><p class="red">是看得见</p><p>是看得见</p><p>是看得见</p> </body> -
px是像素的意思
-
字体之间必须使用英文状态下的逗号隔开
-
空格隔开的多个的单词组成的字体，加引号
-
使用系统默认的字体
-
可以直接给body直接输入字体
-
如果是标题的话，就算是在body{ font-size=12px；}标题部分也要自己在重新定义
-
<head> <style>em {font-style: normal;} <style> </head> <body><em>有点意思</em> </body> -
上述的代码可以复合起来，顺序是
-
font：斜体 粗细 字体大小 字体样式
-
注意不能颠倒顺序
-
复合字体可以没有斜体和粗细但不能没有字体大小和字体样式
-
CSS提供了背景颜色半透明的效果
-
background: rgba(0,0, 0, 0.3);//0.3也可以将.3 -
r代表红，g代表绿色，b代表蓝色，a代表alpha透明度
-
盒子背景半透明，不会影响盒子里面内容的