当前位置:Gxlcms > html代码 > Div+Css视频学习笔记_html/css_WEB-ITnose

Div+Css视频学习笔记_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:4人阅读

1.段落里面(p标签)不能嵌套div.
2.Css:层叠式样式档,同一个标签可以用多个样式修饰。
3.css种类:内联式,嵌入式,外部,输入。

内联:

aaaaaaaaaaa


缺点:复用性差。

嵌入:

好处:可以控制整个网页的某些标签。

外部:

输入:
在css文件中或者style标签中使用@import url(demo.css);

4.样式规则选择器:
html选择器,类选择器,id选择器,关联选择器,组合选择器,伪元素选择器。

html选择器:
p {
font-size:50px;
color:red;
background-color:green;
text-decoration:underline;
}

类选择器:
//only use for p label
p.one {
color:red;
font-size:2cm;
background:green;
}

//use for any label
.two {
color:red;
font-size:2cm;
background:green;
}

adfsdf

id选择器:
#one {
color:red;
font-size:2cm;
background:green;
}

adfsdf

关联选择器:
p em {
color:red;
font-size:2cm;
background:green;
}

.one .two em {
color:red;
font-size:2cm;
background:green;
}


dfdf

组合选择器:
p,div,a,h1,.one,#two {
color:red;
font-size:2cm;
background:green;
}

有其中之一使用即可

伪元素选择器:
a:link {font-size:1cm;color:red}
a:hover {font-size:5cm;color:green}
a:visited{font-size:2cm;color:yellow}
a.one:link {font-size:8cm;color:blue}
div a.one:link{font-size:12cm;color:black}

dfdfdfdf
ffffff


ffffff

5.div+css好处:表现和内容分离,缩短改版时间,减少带宽成本。
段落用p,标题用hx
表格只需要用于显示数据,不用于布局。

margin:外边距
两种方式:
.bianju{
margin-left:10cm;
margin-top:40cm;
margin-bottom:4cm;
margin-right:40cm;
}

.bianju {
margin: 10px 20px 30px 40px;
}

值为auto表示自动。

内边距:
td {
padding-left:4cm;
padding-right:4cm;
padding-top:4cm;
padding-bottom:4cm;
}


p {
float:right;//靠哪边对齐,三种right,left,none
}

.one {
clear:none;
clear:left;
clear:right;
clear:both;
}

可下载附件: Demo

人气教程排行