先HTML后CSS
用HTML进行结构划分,用CSS美化
字体相关
font-size:字号大小
font-family:字体
当字体的名字不是单个单词时,要对字体加引号
以下为UNICODE字体,不需要背,以后尽量写UNICODE的宋体和微软雅黑
font-size:字号
p {
font-size=14px(尽量使用偶数的字号)
}
font-weight:字体粗细
与HTML的B和STRONG不同,FONT-WEIGHT的值有:normal,bold,bolder,lighter,100-900,400=normal 700=bold
font-style字体风格:斜体或者黑体之类的
属性值有:正常 normal 斜体italic 让人为斜体变的正常oblique
h4 {
font-style:italic
}
em {
font-style:normal
color:green
}
FONT综合设置字体样式
h2 {
font:italic bold 14px “宋体”
}
不能改顺序,必须保存大小和字体属性
选择器相关
标签选择器
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某-类标签指定统的CSS样式。 其基本语法格式如下:
标签名{ 属性1:属性值1;属性2:属性值2;属性3:属性值3; }或者
元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统样式,同时这也是他的缺点,不能设计差异化样式。
p {
color:pink
}
类选择器
类选择器使用”.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下,
.类名(属性1:属性值1;属性2:属性值2;属性3:属性值3; }
标签调用的时候用class-"类名”即呵。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
小技巧:
1.长名称或词组可以使用中構线来为选择器命名。不要用纯数字和中文命名
2.不建议使用“"下划线来命名CSS选择器。
.red{ 声明类样式
color:red
}
多类名选择器
.font20{
font-size=20px;
]
.pink{
color:pink;
]
ID选择器
#pink{
color:pink;
}
类选择器是。开头,ID选择器是#开头
W3C标准规定,在同-一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class.
类选择器(lass)好比人的名字,是可以多次重复使用的, 比如张伟王伟李伟李娜
id选择器好比人的身份证号码, 全中国是唯- -的,不得重复。只能使用- -次。
通配符选择器
*{
*代表所有的选择器,写出这个在STYLE里面时,不同调用自己就会变成粉色
color:pink;
}
通配符选择器用“*“号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下,
*{属性1:属性值1;属性2:属性值2;属性3:属性值3; }
例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
伪类选择器
首先,这也是一个选择器, 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择 第1个,第n个元素。
为了和我们刚才学的类选择器相区别,类选择器是 一个点比如.demo (}而我们的伪类 用2个点就是冒号比如:link{}
链接伪类选择器
●:link /未访问的链接/
●:visited /已访问的链接/
●:hover /鼠标移动到链接上/
●:active /选定的链接/
注意写的时候,他们的顺序尽量不要颠倒按照Ivha的顺序。love hate 记忆法或者 Iv 包包非常hao
结构(位置)伪类选择器(CSS3)
●:first-child :选取属于其父元素的首个子元素的指定选择器
●:last-child :选取属于其父元素的最后一个子元素的指定选择器
●:nth.child(n) ,匹配属于其父元素的第N个子元素,不论元素的类型
●:nth-last-child(n) ;选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
n可以是数字、关键词或公式
a:link{ 未访问
font-size:16px;
color:gray;
font-weight:700;
}
a:visited{ 已经访问的链接,已经点击过一次的状态
font-size:16px;
color:red;
font-weight:700;
}
a:hover{ 鼠标放上去的状态
font-size:16px;
color:blue;
font-weight:700;
}
a:active{ 选定的时候的状态
font-size:16px;
color:green;
font-weight:700;
}
<div><a href="#">闪购</a></div>
<div><a href="#">秒杀</a></div>
链接伪类的简写
a { a是标签选择器 所有的链接
font-weight:700;
font-size:16px;
color:gray;
}
a:hover{
color:red; 鼠标经过的时候由灰色变成红色
}
<div><a href="#">闪购</a></div>
结构伪类选择器 CSS3
结构(位置)伪类选择器(CSS3)
●:firs-child :远取属于其父元素的首个子元素的指定选择器
●:last-child :选取属于其父元素的最后- -个子元素的指定选择器
● :nth-chld(n); 匹配属于其父元素的第N个子元素,不论元素的类型even偶数odd奇数n从0开始
●:nth-last-child(n) :选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
n可以是数字、关键词或公式
li:nth-child(even){ 选则所有的偶数孩子
color:pink;
}
- 1
- 2
- 3
- 4
- 5
最终 2 4孩子会被选中,颜色变成粉色
目标伪类选择器
:target目标伪类选择器选择器可用于选取当前活动的目标元素
:target{
color:red;
}
CSS外观
CSS颜色
color属性用于定义文本的颜色,其取值方式有如下3种:
1.预定义的颜色值.如red。green. blue等。
2.十六进制,如#F0000。#FF6600。#29D794等。十六进制是最常用的定义颜色的方式
3. RGB代码。如红色可以表示为rgb255,0.0)或rgb(100%.0%6.0%).
.red{
color:pink;
}
.color0f0{
color:#0f0 0f0就等价于00ff00,这种是重点
}
#rgb{
color:rgb(255,0,0);
}
<div id="rgb">红色</div>
文字设置
line-height:行间距
line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距, 一般称为行高。
line-height常用的属性值单位有三种,分别为像素px.相对值em和百分比%。实际工作中使用最多的是像素px
一般情况下,行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐,相当于htm1中的1gn对齐属性。其可用属性值如下:
- left. 左对齐(默认值)
- right: 右对齐
- center. 居中对齐
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览装窗口宽度的百分比%,允许使用
1em就是一个字的宽度,如果是汉字段落。1em就是一个汉字的宽度
如何使用?
<style>
div {
Letter-spacing: 2px; /* 字间距*/
}
p {
word-spacing: 10px; /* 单词间距针对于英文中文*/
}
</style>
用在标签选择器,像color一样去使用即可。
颜色半透明(Css3)
文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下,
color: rpba(r.g,b,a) a 是alpha透明的意思 取值范围 0~1之间| color: rgba(0,0,0,0.3)
文字阴影
以后我们可以给我们的文字添加阴影效果了Shadow 影子|
text-shadow:水平位置垂直位置模糊距离阴影颜色;
h-shadow
必需。水平阴影的位置。允许负值。
V-shadow
必需。垂直阴影的位置。允许负值。
blur
可选。模糊的距离。
color
可选。阴影的颜色。参阅CSS颜色值。
h1 {
font-size:100px;
text-shadow:5px 11px 3px rgba(0,0,0,0.5)
}
/*对应于水平位置 垂直位置 模糊距离 阴影颜色
前两个参数必须写,后面两个参数可以省略
*/