JavaWeb自学之css学习笔记

最新推荐文章于 2024-05-05 03:08:25 发布

我心好慌

最新推荐文章于 2024-05-05 03:08:25 发布

阅读量468

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u012011069/article/details/50354567

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、css简介
*css 层叠样式表
**层叠：一层一层的

**样式表：
很多的属性和属性值
*使页面显示效果更加好
*css将网页内容和显示样式进行分离，提高了显示功能

2、css和html的结合方式（四种结合方式）
(1)在每个html标签上面都有一个属性style，把css和html结合在一起
<div style="background-color:red;color:green">今天天气很不错</div>
属性和属性之间用分号隔开，属性和值之间用冒号
(2)使用html的一个标签实现 <style>标签：写在head里面
*<style type="text/css">
css代码;
</style>

*<style type="text/css">
div{
background-color:pink;
color:red;
}
</style>
(3)在style标签里面使用语句（了解）
@import url(css文件的路径);
-第一步，创建一个css文件
div{
background-color:yellow;
color:black;
}
-第二步，在style标签里面引用css文件
<style type="text/css">
@import url(div.css);
</style>

***第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式

(4)使用头标签 link,引入外部css文件(在head里面没有style标签)
-第一步：创建一个css文件

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

这种方式无需更改html页面，只需修改div文件即可，实现网页内容与显示样式的分离
例子：汶川地震各大网页内容显示为灰色，就是通过div实现

***优先级(一般情况)
从上到下，从外到内，优先级由低到高
***后加载的优先级高

3、css的选择器
选择器：要对哪个标签里面的数据进行操作
***选择器格式选择器名称{属性名:属性值;属性名:属性值;...}

(1)标签选择器
*使用标签名作为选择器的名称
如 div{
background-color:gray;
color:red;
}

(2)class选择器
*每个html标签都有一个属性class
-<div class="haha">aaaaa</div>
- div.haha{
background-color:pink;
}
.haha{
color:red;
}

(3)id选择器
*每个html标签上面有一个属性id
-<div id="hehe">bbbbb</div>
- div#hehe{
background-color:pink;
}
使用 #hehe{
color:tomato;
} 可以将id都为hehe的标签全部修改
***优先级
style>id选择器>class选择器>标签选择器

4、css的扩展选择器
(1)关联选择器
*<div><p>wwwwwww</p></div>
*设置div标签里面p标签的样式，嵌套标签里面的样式
* div p{
background-color:red;
}

(2)组合选择器
*<div>111111</div>
<p>2222222</p>
*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
*div,p{
background-color:red;
}

(3)伪元素选择器
*css里面提供了一些定义好的样式，可以拿过来使用
*比如超链接
**超链接的状态
原始状态 :link
鼠标放上去的状态 :hover
点击 :active
点击之后 :visited

5、css的盒子模型(div+css)
在进行布局前需要把数据封装到一块一块的区域(div)内，这个区域的专业术语叫盒子
(1)边框
border: width style color 可统一设置，也可以分别设置
上 border-top
下 border-bottom
左 border-left
右 border-right

代码： <head>
<style type="text/css">
div{ //统一设置边框
width:200px;
height:100px;

border:2px solid red;
}

#div12{ //分别设置边框
border:2px dashed tomato;
}

					</style>

</head>
<body>
<div id="div11">这是第一个div</div>
<div id="div12">这是第二个div</div>
<div id="div13">这是第三个div</div>
</body>

(2)内边距
padding:20px;可统一设置，也可分别设置
上 padding-top
下 padding-bottom
左 padding-left
右 padding-right

(3)外边距
margin:20px;可统一设置，也可分别设置
上 margin-top
下 margin-bottom
左 margin-left
右 margin-right

**对数据进行操作，需要把数据放到一个区域里面(div)

6、css的布局漂浮(了解，某些浏览器不好使)
float:
**属性值
left：文本流向对象的右边(后面的div到右边)
right：文本流向对象的左边(后面的div到左边)

7、css的布局定位
position:
**属性值
-absolute:
***将对象从文档流中拖出，漂浮在下一个div的上面
***可以使用top、bottom等属性进行定位
-relative:
***不会把对象从文档流中拖出
***可以使用top、bottom等属性进行定位

8、案例：图文混排案例
**图片和文字在一起显示(首先使用div把图片和文字包起来)
代码： <html>
<head>
<title>案例—图文混排</title>
<style type="text/css">
#imgtext11{
width:200px;
height:200px;
border:2px dashed green;
}
#img11{
float:left;
}
#text11{
color:tomato;
}
</style>
</head>
<body>
<div id="imgtext11">
<div id="img11"><img src="a.png"/></div>
<div id="text11">世俱杯恒大0-3巴萨邹正重伤离场
恒大发布战广岛海报:为邹正而战
恒大足校小球员:长大找巴萨复仇
西媒评恒大:技术差得很防守最棒</div>
</div>
</body>
</html>

9、案例图像签名
**在图片上面显示文字
<html>
<head>
<title>案例二图像签名</title>
<style type="text/css">
#text21{
position:absolute;
top:140px;
left:50px;
color:white;
}
</style>
</head>
<body>
<div id="img21"><img src="b.png"></div>
<div id="text21">网球双生花半裸写真</div>
</body>
</html>