-
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透明度
-
盒子背景半透明,不会影响盒子里面内容的