第一周复习二 (CSS样式表及其属性)

时间:2022-09-23 10:45:02

样式表三种写法

1内联写法:style直接写在标签内。个人感觉多用于个别标签,一般情况优先级较高

style="font-size:16px;"

2内嵌写法:写在<head></head>标签内。个人感觉多用于较多或通用的一类标签,用来减少工作量

<style type="text/css">

{}

</style>

分为三种:

标签选择器

<style type="text/css">

标签名(类如div){ }

</style>

类选择器

<style type="text/css">

.class{}

</style>

id选择器

<style type="text/css">

#id{ }

</style>

特别的

*表示对所有元素起作用

<style type="text/css">

*{

}

</style>

三种复合选择器

并列,用,

<style type="text/css">

标签名,#id{

}

</style>

子代,用空格

<style type="text/css">

table td{

}

</style>

筛选,用.

<style type="text/css">

p.sp{

}

</style>

3外部样式表

<Link rel="stylesheet" type=‘text/css‘"href=’’"/>

这里用href

常用属性

1· 背景与前景

background-color:;背景色,

background-image:url(); 设置背景图片

background-attachment:fixed; 背景固定

background-repeat:no-repeat; 不平铺

background-position:center;背景图居中,设置背景图位置时,repeat必须为no-repeat

2字体

font-family:字体

color:文字颜色

font-size:18px; 字体大小(12px,14px,18px)

font-weight:normal;bold加粗

font-style:italic; 倾斜

text-decoration:overline; 下划线

text-align:center; (水平)居中对齐

vertical-align:middle; (垂直)居中对齐;与行高同用

line-height:行高

3边界与边框

border:5px solid red; 红色,5像素

margin:50px; 外边框宽度50像素

margin-top:50px; 上边外边框宽度50像素

margin:20px 0px 20px 0px; 顺序:上右下左,时钟顺时针顺序

padding:50px; 内间距50像素

padding-top:50px; 内上边框50像素

padding:50px 20px 10px 20px; 顺序为上右下左,时钟顺时针顺序