HTML-CSS

来源：互联网发布：知乎回答排序规则编辑：程序博客网时间：2024/06/15 18:05

1、html中div元素，用于存放图片、文字、其他元素；css文件，用于说明div中的图片、文字、其他元素的样式(大小、颜色、背景、位置)

2、编辑css文件，使用eclipse，新建一个web页面，注：

<!DOCTYPE HTML PUBLIC ...>中doctype含义是文档类型，用于指定dtd（说明当前这个html版本）；

新闻Body中使用css文件。

3、div是一个块级元素，可以包含段落、表格等内容，div用来布局定位网页中的每个区块，会另起一行显示样式；

span是一个行内元素，纯粹是为了应用样式，直接在行上显示样式。

4、三种选择器（在css中创建，而在网页页面html、jsp、php、asp.net中使用）：

新闻1

5、类选择器：.类选择器名{属性名:属性值;...}

.style1{

font-weight:blod;

font-size:10px;

background-color:pink;

color:black;

}

6、ID选择器：#id选择器{属性名：属性值；}

#style2{

font-size:30px;

background-color:silver;

}

7、html选择器：

body{

color:orange;

}

a：link{

color:black;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

a:visited{

color:red;

}

8、通配符选择器：希望所有的元素都符合某种样式，*{margin:0;padding:0}

例：{margin:0;padding:0}：可以让所有html元素的外边距和内边距都默认为0。同一个网页，防止不同的浏览器打开的效果不同

/*margin:0px; */

/*margin-top:10px;

margin-left:10px;

margin-right:0px;

margin-botten:0px;*/

margin:10px 0px 0px 10px;/*上右下左*/

/*margin:10px 0px 0px;上，(右，左)，下*/

padding:0px;/*padding的规范和margin是一样的*/

}

这是一则重要的新闻

9、父子选择器：(子选择器标签是html可以识别的标记，父子选择器可以有多级，父子选择器可以适用于id选择器和类选择器)

#style2 span{

font-style:italic:

color:red;

}

继续往下的父子：#style2 span span{}

这是一则非常重要的新闻

10、一个元素最多有一个id选择器，但是可以有多个类选择器;

新闻1；引用多个class选择器的时候，用空格隔开；两个类选择器控制样式发生冲突的时候，以二者在css文件中写的先后顺序作为优先级。

注：优先级：id选择器 > 类选择器 > html选择器 > 通配符选择器

11、在css文件中，如果有多个id选择器、类选择器、或者html选择器有相同的部分时，我们可以将共同的部分整合起来。

.style1, .style2, .style3{

height:10px;

float:left;

}

12、块元素：inline element，只占用内容的宽度，默认不会换行；如,<a>，块元素可以容纳文本、行内元素、块元素；

13、行内元素：block element，自动换行，同时格式占满整行；如<div>,，行内元素一般放文本或其他行内元素。一些css属性对行内元素不生效，比如margin,left,right,width,height,建议使用块元素定位。

14、块元素和行内元素可以互相转化

span内容

或写在class中：

.style1{

display:block;/*所有引用了style1的元素，都按照块元素显示*/

}

15、流：在网页设计中元素(标签)的排列方式。标准流：元素在网页中就像流水，排在前面的元素内容先出现，排在后面的元素内容后出现。

16、盒子模型：

margin（外边距）：两个div中间的距离；

padding（填充）：div里面有个img，那么div中是img填充的，属性：上下左右；

content（内容）：div中的内容img；

border（边框）：div的边框；

例：

body{

border:1px solid red;(宽度样式颜色)，注，顺序可以调整；

width:800px;设置body的宽度

height:1000px;设置body的高度

margin:0 auto; 设置body居中，0表示上下0，auto表示左右居中

}

style{

margin-top:10px; 向下

margin-left:50px;向右

padding-top:5px;一个div里面的img，img就是div的填充

padding-left:5px;

}

/*ul的样式*/

.faceul{

width:350px;

height:85px;

background-color:green;

list-style-type:none;无序列表前面的点是否展示

}

/*li的样式*/

.faceul li{

float：left；左浮动，是指让该元素，尽量向左边移动，让出自己右面的空间给下一个元素显示。

例如三个div都向左移动，那么div1向左浮动直到碰到包含框，另外两个div向左浮动直到碰到前一个浮动框

//float：right；右浮动，是指让该元素尽量向右面移动，直到碰到他的父元素的右面边界

width:107px;

height:78px;

background-color:pink;

margin-left:5px;各个li之间的空隙

text-align:center;li里面的内容居中（放在该元素中的其他元素左右居中）

}

/*faceul 中img的样式*/

.faceul img{

margin-top:2px;

width:30px;ul中的图片的大小要设置一样

height:40px;

margin-bottom:2px;图片下面的其他内容不要跟图片跟的太近

}

17、总结：

如果希望div向右面显示，这时我们使用右浮动：float:right;

如果我们希望所有的元素，横向排列，则使用到左浮动，这时对div的css添加：float:left;

特别注意，如果一行的宽度不够排下所有的div，那么会自动换行。如果有某个div过大，则会卡住别的div。

理解：如果一个元素右/左浮动则:1：它本身会尽可能向右/左移动，直到碰到边框或者别的浮动元素，浮动对块元素和行内元素都生效。2：元素向右/左浮动，就相当于让出自己的左/右边，别的元素就会在它的左/右边排列。

0 0