CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
css样式:如p{
font-size:12px;
color:red;
}
p是选择符,{}里面是声明,front-size和color是属性,12px和red是值
当有多个属性的时候中间用分号;来申明
css的注释/*注释*/,这个了解一下就行
css的样式共有三种方法,内联式、嵌入式和外部式
1.内联式 例:<p style="color:red">这里文字是红色。</p>
2.嵌入式 例:<style type="text/css">
span{
color:red;
}
</style>
3.外部式:写在外部的一个文件中
在主文件中写<link href="base.css" rel="stylesheet" type="text/css" />就可以把外部文件中的样式引用过来
三种样式的优先级:内联式 > 嵌入式 > 外部式,另外还要注意就近原则
选择器的几种分类:1.选择器,2.标签选择器,3.类选择器 4.id选择器 5.子选择器 6.包含(后代)选择器 7.通用选择器 8.伪类选择符 9.分组选择符
<style type="text/css">
选择器{
样式1;
样式2;
}
</style>
上面算是css的格式
2.标签选择器其实就是html代码中的标签。
3.类选择器 格式 .类选器名称{css样式代码;}
注意:
1、英文圆点开头
用法: 例如:.stress{
color:red;
}
在段落中用的时候::三年级时,我还是一个<span class="stress">胆小如鼠</span>的小
4.id选择器
跟类选择器十分类似,把类选择器的圆点开头改成#开头,引用的时候是id=""
类选择器和id选择器的区别:
1、ID选择器只能在文档中使用一次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。
总结:类选择器比id选择器全能,ID选择器只能用一次,只能有一种属性
5.子选择器
.food>li{border:1px solid red;}
6.包含(后代)选择器
.first span{color:red;}
7.通用选择器
* {color:red;} 功能最强大的选择器,统一修改
8.伪类选择符
它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
9.分组选择符
当你想为html中多个标签元素设置同一个样式时 ,可以使用分组选择符
例如:h1,span{color:red;}
p{color:red!important;} 其中!important是设置最高权值,就是这个标签要先起作用
三。文字的排版,字体,段落的设置
1.字体
body{font-family:"Microsoft Yahei";}
或者body{font-family:"微软雅黑";}
2.字号,颜色
body{font-size:12px;color:#666} #666代表的是灰色,12px是12像素
3.粗体
span{font-weight:bold;}
4.斜体
a{font-style:italic;}
5.下划线
a{text-decoration:underline;}
6.价格删除线
.oldPrice{text-decoration:line-through;}
7.缩进
p{text-indent:2em;}
8.行间距
p{line-height:1.5em;}
9.字间距
h1{
letter-spacing:50px;
}
10.段落排版对齐
居中:h1{
text-align:center;
}
居左 : h1{
text-align:left;
}
居右 : h1{
text-align:right;
}