你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

div+css基础_myeclipse div+css

作者：你好赵伟 | 2024-03-27 16:38:57

踩

myeclipse div+css

Div+css技术

Div是用于存放文字，图片，元素的容器

Css 是用于指定存放在div中的内容如何显示，包括内容的位置和外观(层叠样式表)

Html 文件

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

<body>

<table>

</table>

</div>

</body>

</html>

Css文件

/*选择器*/

/*margin：上右下左*/

.style1{

width:100px;

height:200px;

border:1pxsolid red ;

color:blue;

margin:100px200px 300px 400px;

}

/* 父子选择器table*/

.style1 table{

width:99px;

height:180px;

border:1pxsolid black;

}

/*父子选择器td*/

.style1 table td{

border:1pxsolid black;

text-align:center;

}

CSS的必要性

使用<span>以及强大的工具

使用IDE(集成开发环境)myeclicpse

因为myeclipse 带有提示功能

一般的网站头部文件解释

Eclipse的快捷键设置（contentAssitant）,把它配置成~

在windows –prefrecnse-输入key-输入content-content Assitant –快捷键改成·

对于新建的html文件的解释

使用span 格式，看到使用Css的一般格式

<元素名 style =”属性名：属性值；属性名：属性值；”>

元素可以是html之中的任意一种

属性名和属性值要参考W3CSCHOOL的文档

运行：

然后使用CSS来统一风格

CSS 分类：内部CSS，外部CSS

使用内部CSS

汶川大地震时使所有的图片和文字全都变黑白-----------------滤镜技术

CSS选择器

id>类选择器>html选择器

1 类选择器

编写一个css文件，在HTML中引入CSS，使用CSS定义的类控制器

可以直接拖入CSS

2 id选择器

注意：是#

3 html选择器

这个是控制全局样式的选择器，优先比较低，优先级是：id>类选择器>html选择器

练习：

对于超链接的处理：

通配符选择器

作用：用来解决不同浏览器之间的左边距和上边距不统一的问题，有时候特别有用

/*使用通配符选择器，对外边距和内边距进行清零*/

/*margin: 0px;*/

/* margin:10px 0px 0px 10px; */ /*代表着上右下左逆时针方向旋转*/

margin:10px 0px0px ; /*代表着上左右下 */

padding: 0px;

}

CSS 综合使用

一行字内的格式风格有所不同利用id选择器

#style2{

font-size: 50px;

color: green;

font-style: italic;

}

/*父子选择器*/

#style2 span {

color: red;

font-size: 60px;

}

2 父子选择器在id 选择器和 class 选择器都可以

但是id 选择器要大于 class 选择器

3 父子选择器还可以多层出现 style2—span-span

#style2 span span{

color: red;

font-size: 60px;

}

4 一个元素只可以有一个id选择器，但是可以有多个class选择器

有两个class 选择器的时候，看谁写在css文件的后面以谁为主

四类选择器的优先权：id class html 通配符

然后，优化代码部分，提取共性的css

例如

练习题

Css文件代码

块元素和行内元素

行内元素：Span 元素：里面的东西有多大就多大，只占内容的宽度，默认不会换行，一般放文本或者其他的行内元素

块元素：Div，p 元素：不管内容多少，要换行，同时占满整个一行(太霸道)，可以放文本，行业元素，块元素

块元素和行内元素互换

Display:block 行内元素转块元素

Display:inline 块元素转行内元素

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/325515