有预定的颜色值 red,green,blue
十六进制 #ff00000,#FF5500 ,#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
- p {
- text-align: right;//让字体向右移动
- text-decoration: normal;
- }
- a {
- text-decoration: none;//去掉连接的下划线
- color: black;
- }
- <body>
- <a href="#">粉红色的回忆a>
- <p>有点意思p>
- body>
text-align是文本的水平对齐
text-decoration给文本添加下划线、删除线、上划线
none、underline、overline、line-through都是属性名
none默认,没有装饰线,(最常用)
underline下划线,链接a自带下划线(常用)
text-indent给文本的第一行首行缩进 多少距离
- p {
- text-indent: 2em;//em是相对当前的文本两个像素的距离大小
- line-height: 26px;
- }
- <body>
- <p>有点意思p>
- body>
em是相对当前的文本两个像素的距离大小

line-height同于设置行间的距离,可以控制文字和行之间的距离
如果文本高度为16,设置行间距为26则10分给上间距和下间距
CSS分为内部样式表、行内样式表、外部样式表
外部样式表是单独写到CSS文件中,之后引用到HTLM文件中。
新建一个.css文件,把所有的CSS文件放到该文件中.css文件中p{ color: red;}
在HTLM的页面里面的
中使用< link rel="stylesheet" href="css文件路径">chrome调试工具
按F12或检查
Ctrl+滚轮可以放大缩小
左边的是HTML元素结构,右边是CSS结构
Ctrl + 0恢复浏览器的大小
可用于检查代码的错误,只能检查不能修改错误
快速生成标签直接输入标签名按tab健如div+tab健
想生成多个相同的标签,加上 * 如:div * 3就可以生成3个div
如果是父子关系则,ul > li 就可以了
兄弟关系则,用 + 就可以 如; div+ p
生成类名或id名字的。直接写.demo + tab 是生成类名的,#two + tab是生成id的
div 加上 ¥ * 5能生成5个有顺序的div,$是自增的符号
div{内容} * 5 能生成5个内容相同的五个div
后代选择器又称包含选择器
-
- ol li {
- color: red;
- }
- ol li a {
- color: red;
- }
- .nac li a {//将下面的另一个ol变色
- color: red;
- }
-
- <body>
- <ol>
- <li>说的就是li>
- <li>说的就是li>
- <li> <a href="#">说的就是a>li>
- ol>
-
- <ol class="nac">
- <li>说的就是li>
- <li>说的就是li>
- <li> <a href="#">说的就是a>li>
- ol>
- body>
元素1和元素2中间用空格隔开
元素1是父类,2是子类。最终只会选择元素2进行变色
子类还有子类就继续空格往下添加