CSS使用

最新推荐文章于 2022-06-01 17:11:10 发布

心、若止水

最新推荐文章于 2022-06-01 17:11:10 发布

阅读量178

点赞数

分类专栏： JAVA Web

本文链接：https://blog.csdn.net/qq_43599023/article/details/100858999

版权

JAVA Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS

1.CSS的简介

*css 层叠样式表

** 层叠：一层一层的

** 样式表：很多属性或者属性值

* 使页面显示的效果更好

*css将网页内容和显示样式进行分离，提高了显示功能

2.css和html的结合方式（4种结合方式）

（1）每个html标签上都有一个属性 style, 把css和html结合在一起

-<div style = "background-color : red; color:green;">

（2）使用html的一个标签实现<style>标签，写在head里边

*<style type="text/css">

css 代码；

</style>

*<style type="text/css">

div{

background-color:blue;

color: red;

}

</style>

（3）在style标签里边使用语句（在某些浏览器上不起作用）

@import url(css文件的路径);

-第一步，创建一个css文件

@import url(css文件的路径);

</style>

（4）使用头标签link,引入外部css文件

-第一步，创建一个css文件

-<link rel="stylesheet" type="text/css" href="css文件的路径"/>

***优先级（一般情况）

由上到下。由外到内，优先级由低到高

***后加载的优先级高

***格式选择器名称（属性名：属性值; 属性名：属性值;.......）

3.css的基本选择器（3种选择器）

** 要对哪个标签里边的数据进行操作

(1)标签选择器

* 使用标签名作为选择器的名称

div{

background-color:gray;

color:white;

}

（2）class选择器

*每个html标签都有一个属性 class

例子：

<1> div标签的这个属性背景色设置成黄色

div.haha{

background-color:yellow;

}

-<div class ="haha">aaaaaa</div>

<2>所有标签中有这个haha属性得背景色都是黄色

-.haha{

background-color:orange;

}

（3）id选择器（与class相似）

*每个html标签上面都有一个属性 id

-<div id="hehe">bbbbb</div>

- #hehe{
background-color:gray'

}

***优先级

sytle>id选择器>class选择器>标签选择器

4.css的扩展选择器

(1)关联选择器

*<div><p>wwwwww</p></div>

*设置div标签里面p标签的格式，嵌套标签里面的格式

* div p{ （空格隔开）

background-color:green;

}

（2）组合选择器

*<div>111</div>

*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式

*div,p{
background-color:orange;

}

(3)伪元素选择器

*css里边提供了一些定义好的样式，可以拿过来使用

*比如超链接

**超链接的状态

原始状态鼠标放上去的状态点击点击后

：link :hover :active :visited

5.css的盒子模型

** 在进行布局前需要把数据封装到一块一块的区域内（div）

（1）边框

border:2px solid blue;

border: 统一设置

上 border-top

下 border-bottom

左 border-left

右 border-right

（2）内边距

padding:20px;

使用padding统一设置

也可以分别设置

上下左右四个内边距

（3）外边距

margin:20px;

可以使用margin统一设置

也可以分别设置

上下左右四个外边距

6.css的布局的漂浮（了解）

float:

**属性

left : 文本流向对象的右边

right: 文本流向对象的左边

7.css的布局的定位

position:

** 属性值

-absolute: (类似于某些网站上一些漂浮的广告)

***将对象从文档流中拖出

*** 可以是top、bottom等属性进行定位

-relative:（和absolute不同，后边的div不会被补上去）

***不将对象从文档流中拖出

*** 可以是top、bottom等属性进行定位

图片与文字一起显示的例子：

<html>
 <haed>
   <title>HTML示例</title>   
   <style>
          #imgtex11{

                width:350px;
                height:300px;
		
		boeder:2px dashed orange;
             
          }

          #img11{
               float:left;
	 }

	  #text1{
               color:green;
         }

   </style>
 </head>

<body>
 <div id="imagtex11">
   <div id="img11"><img src="aa.jpg"  width="250"  height="200"/></div>
   <div id="tex11">啊啊啊啊所多去玩却无号定位虹口区是肯定会</div>
 </div>
</body>

</html>

心、若止水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS使用

CSS1.CSS的简介 *css 层叠样式表 ** 层叠：一层一层的 **样式表：很多属性或者属性值 *使页面显示的效果更好 *css将网页内容和显示样式进行分离，提高了显示功能2.css和html的结合方式（4种结合方式）（1）每个html标签上都有一个属性 style,...
复制链接

扫一扫

专栏目录