礼物排行榜html css,HTML css

css 是 cascading style sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

css 有四种引入方式

一，行内式：

hello

二, 嵌入式

嵌入式是将css样式集中写在网页的标签对的标签对中。

title

p{

background-color: #2b99ff;

}

三, 链接式

将一个.css文件引入到html文件中， 推荐使用

四, 导入式

将一个独立的.css文件引入html文件中，导入式使用css规则引入外部css文件，

@import"klvchen_style.css"; 此处要注意.css文件的路径

css 的选择器

＊ # 通用元素选择器，匹配任何元素

e # 标签选择器，匹配所有使用e标签的元素

.info和e.info # class选择器，匹配所有class属性中包含info的元素

e,f # 多元素选择器，同时匹配所有e元素或f元素，e和f之间用逗号分隔

e f # 后代元素选择器，匹配所有属于e元素后代的f元素，e和f之间用空格分隔

e > f # 子元素选择器，匹配所有e元素的子元素f

e + f # 毗邻元素选择器，匹配紧随e元素下面的同级元素f

title

#outer{

color: red;

}

#outer>.c1{ /*子代选择器，选择 id 为 outer 的子代为 class c1 的元素，孙代以后不算 */

font-size: 50px;

}

hello p

hello dive

hello span

p2 .....

p3 .....

p4 .....

div3

效果

e[att] # 匹配所有具有att属性的e元素，不考虑它的值。(注意：e在此处可以省略，比如“[cheacked]”。以下同。)

e[att=val] # 匹配所有att属性等于“val”的e元素

e[att~=val] # 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的e元素

e[attr^=val] # 匹配属性值以指定值开头的每个元素

e[attr$=val] # 匹配属性值以指定值结尾的每个元素

e[attr*=val] # 匹配属性值中包含指定值的每个元素

例子:

title

[id]{ /*匹配所有具有att属性的e元素*/

color: red;

}

[class*="iv"]{ /*匹配属性值中包含 iv 的每个元素*/

background-color:green;

}

div1

div2

div3

di

效果：

a:link # 没有接触过的链接, 用于定义了链接的常规状态。

a:hover # 鼠标放在链接上的状态, 用于产生视觉效果。

a:visited # 访问过的链接,用于阅读文章, 能清楚的判断已经访问过的链接。

a:active # 在链接上按下鼠标时的状态, 用于表现鼠标按下时的链接状态。

e:before # 在对应的元素之前插入内容

e:after # 在对应的元素之后插入内容

例子：

title

a:link{ color: red; }

a:hover{ color: yellow; }

a:visited{ color: purple; }

a:active{ color: green; }

p:before{ content: "hello"}

p:after{ content: "world";}

百度

klvchen

效果:

rgb颜色对照表

https://www.114la.com/other/rgb.htm

title

p{

color: rgb(255,200,255); /*设置字体颜色*/

font-size: 45px; /*设置字体大小*/

font-style: italic; /*设置字体样式*/

font-family: "times new roman"; /*设置字体系列*/

font-weight: lighter; /*设置字体粗细*/

background-color: #cc3399; /*设置背景颜色*/

text-align: center; /*设置文本对齐方式*/

line-height: 100px; /*设置行间的距离*/

letter-spacing: 5px; /*设置字母间距*/

word-spacing: 10px; /*设置单词间距*/

text-transform: capitalize; /*控制文本的大小写*/

}

#div1{

height: 600px; /*设置元素的高度*/

background-color: antiquewhite; /*设置背景颜色*/

background-image: url("1.png"); /*设置背景图片*/

background-repeat: no-repeat; /*设置图像的平铺模式*/

background-size: 60px 60px; /*设置图像的大小*/

background-position: center; /*设置背景图像的起始位置*/

}

hello world

外边距和内边距

margin # 用于控制元素与元素之间的距离(外边距)；

padding # 用于控制内容与边框之间的距离(内边距)；

border # 围绕在内边距和内容外的边框(边框);

content # 盒子的内容，显示文本和图像;

一个元素的宽度 = content 宽度 + border*2 + padding*2

一个元素的高度 = content 高度 + border*2 + padding*2

练习: 300px300px的盒子装着100px100px的盒子，分别通过margin和padding设置将小盒子 移到大盒子的中间

# 使用 margin

title

body{

margin: 0px; /* 消除 body 的默认边框 */

}

.div1{

background-color: aqua;

width: 300px;

height: 300px;

border: 1px solid green; /* 设置 border 的 solid 或者 让div1 中有内容，否则导致 margin 识别的是 body的边框而非 div1 的边框 */

}

.div2{

background-color: blueviolet;

width: 100px;

height: 100px;

margin-top: 100px;

margin-left: 100px;

}

# 使用 padding

title

body{

margin: 0px;

}

.div1{

background-color: aqua;

width: 300px;

height: 300px;

border: solid green;

padding-top: 200px;

padding-left: 200px;

}

.div2{

background-color: blueviolet;

width: 100px;

height: 100px;

}

display

# display 的值

inline : 默认。此元素会被显示为内联元素，元素前后没有换行符。

block : 此元素将显示为块级元素，此元素前后会带有换行符。

none : 此元素不会被显示。

table-cell : 此元素会作为一个表格单元格显示。

title

p {display: inline}

div {display: none}

本例中的样式表把段落元素设置为内联元素。

而 div 元素不会显示出来！

div 元素的内容不会显示出来！