『黑马程序员济南』JavaEE就业笔记串讲---CSS

『黑马程序员济南』JavaEE就业笔记串讲---CSS

【HTML的块标签】

<div></div> :默认一个div独占一行.

<span></span> :默认在同一行.

【CSS的概述】

Ø 什么是CSS:

* HTML相当于网站的骨架!CSS对骨架进行美化!

Ø CSS在那些地方使用:

任何网站都会使用CSS去美化页面!!!

Ø 如何使用CSS

知道CSS的语法.

【CSS的基本语法】

CSS的基本语法通常包含两个部分:一个是选择器,一个声明.

* 选择器{属性:属性值;属性:属性值...}

【CSS的引入的方式】

Ø 行内样式:直接在HTML的元素上使用style属性设置CSS.

<h1 style="color:red;font-size:200px ;">标题</h1>

Ø 页面内样式:在HTML的<head>标签中使用<style>标签设置CSS.

<style>

h1{

color:blue;

font-size: 40px;

}

</style>

Ø 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.  

<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />

【CSS的选择器】

Ø 元素选择器:

div{

border:1px solid blue;

width:40px;

height:45px;

}

Ø ID选择器:

#d1{

border:2px solid red;

}

Ø 类选择器:

.divClass{

border:2px solid yellow;

}

【CSS的浮动】

Ø 使用float属性可以完成DIV的浮动.

float属性的取值:

Ø 清除浮动效果:使用clear属性进行清除:

Ø 案例:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

.divClass{

border:1px solid blue;

width:200px;

height:220px;

}



#d1{

float:left;

}

#d2{

float:left;

}

#d3{

float:left;

}

.clear{

clear:both;

}

</style>

</head>

<body>

<div id="d1" class="divClass">DIV1</div>

<div id="d2" class="divClass">DIV2</div>

<div id="d3" class="divClass">DIV3</div>

<div class="clear"></div>

<div id="d4" class="divClass">DIV4</div>

</body>

</html>

【CSS的其他选择器】

Ø 属性选择器:

<style>

input[type="text"]{

background-color: red;

}

</style>

Ø 后代选择器:

div span 查找的是所有div中的所有的span元素.

h1 strong{

   color:red;

}

<h1>

This is <strong>very</strong> <strong>very</strong> important.

</h1>



<h1>This is

<strong>very</strong>

<em>really

<strong>very</strong>

</em>

important.

</h1>

Ø 子元素选择器:

<div > span找这个div中的第一层级的span元素.

<h1 > strong{

   color:red;

}

<h1>

This is <strong>very</strong> <strong>very</strong> important.

</h1>



<h1>This is

<strong>very</strong>

<em>really

<strong>very</strong>

</em>

important.

</h1>

Ø 并列选择器:

选择器,选择器{

}

【CSS中的定位】

position属性设置定位:

* relative:相对定位

* absolute:绝对定位

使用另外两个属性:left,top

转载于:https://my.oschina.net/u/3828683/blog/1802836

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值