CSS基础学习

【样式概要和选择器】

& lt; !DOCTYPE html>

& lt; html>

& lt; head>

& lt;元charset=皍tf - 8”在

& lt; title>页面一& lt;/title>

& lt; !——引用css的第1种方式(引用文件)——在

& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/new_file.css "/祝辞

& lt; !——引用css的第2种方式,定义,。这种用得最多——在

& lt; style>

.logo {,

背景颜色:红色;

}

& lt;/style>

& lt; !——或:第2种方式也可写成这样,在

& lt; style>

# wsyht {

背景颜色:红色;

}

& lt;/style>

& lt; !——或:第2种方式也可写成这样,在

, div {,,& lt; !——组合标签:找所有的div和标签,只要是div和标签,字体都是红色的→

颜色:红色;

}

& lt; !——或:第2种方式也可写成这样,在

一个div {, & lt; !——层级标签:想写几层就几层,一个标签下的div标签变成红色,如下代码,在

颜色:红色;

}

& lt; a>

& lt;输入/祝辞

& lt; div> & lt;/div>

& lt; a/祝辞

。标识一个{,& lt; !——任何标签只要类=标志,他里面的一个标签都是红色,如下代码,在

颜色:红色;

}

& lt; div类=氨曛尽钡脑?/p>

& lt; a> & lt;/a>

& lt;/div>

输入(type='文本']{,& lt; !——让所有输入标签,类型='文本的属性都用这个样式,也叫属性选择器——在

颜色:红色;

}

& lt;/head>

& lt; !——第二种方式用得最多的是。层,级和组合标签,在

& lt; body>

& lt; !——引用css的第3种方式,直接加参数,在

& lt; div祝辞123 & lt;/div>

& lt; div类=氨曛尽痹?23 & lt;/div>1,& lt; !——引用第种方式或第2种方式的css,引用。号开头的——在

& lt; div id=皐syht”在123 & lt;/div>,1,& lt; !——引用第种方式或第2种方式的css,引用#号前面开头的,身份证要唯一,第二个标签不能再引用wsyht这个样式,只能用一次——在

& lt;/body>

& lt;/html>

【最常用两种选择器演示】

& lt; !DOCTYPE html>

& lt; html>

& lt; head>

& lt;元charset=皍tf - 8”在

& lt; title>页面一& lt;/title>

& lt; style>

。标志{

background - color: # FF1493;

字体大小:18 px;

边界:1 px固体# fff;

}

。标志,。标志p {

字体大小:56 px;

}

& lt;/style>

& lt; !——rgb颜色对照表网址http://www.114la.com/other/rgb.htm-->

& lt;/head>

& lt; body>

& lt; div类=氨曛尽钡脑?/p>

& lt; div> div标签& lt;/div>

& lt; a>一个标签& lt;/a>

& lt; p> p标签& lt;/p>

& lt;/div>

& lt;/body>

& lt;/html>

【样式之背景图片】

& lt; !DOCTYPE html>

& lt; html>

& lt; head>

& lt;元charset=皍tf - 8”在

& lt; title>页面& lt;/title>

& lt;/head>

& lt; body>

& lt; !——没有重演不重复53 px纵轴,在

& lt; div Apple-tab-span”>高度:20 px;

平铺方式:不再重演;

背景位置:0 px -53 px;“在

& lt;/div>

& lt;/body>

& lt;/html>

& lt; !——其它属性

: 9 px

左:18 px

宽度:18 px

高度:16 px

——在

【边框和内外边距】

& lt; !DOCTYPE html>

& lt; html>

& lt; head>

& lt;元charset=皍tf - 8”在

& lt; title>页面& lt;/title>

& lt;/head>

& lt; body> & lt; !——边界边框,红色固体实线,border-top-style顶部样式为虚线(虚线)——在

& lt; div Apple-tab-span> border-top-style:虚线;“祝辞,abc

& lt;/div>

& lt; !——margin-top头部外边距,padding-top顶部内边距60 px,在

& lt; div祝辞

& lt; div Apple-tab-span”> margin-top: 10 px; margin-left: 20 px; margin-right: 20 px;

padding-top: 60 px;“祝辞wsyht