您的位置：首页 > Web前端 > CSS

JavaWeb自学之css学习笔记

2015-12-18 22:26 671 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航