JavaEE之CSS学习

CSS

cascade style sheet 层叠样式表
1.概念
决定页面的样式.
1>.配色

2>.布局

2.CSS与 HTML的结合方式
1> style属性

在标签上加入style属性.
属性的值就是css代码.
如：<p style="color:red;" >HelloWord</p>
2> style标签

在页面的head标签中, 书写一个style标签.
在style标签中书写css代码.
如：<style type="text/css">
p {
color:blue;
}
3> link标签引入

在页面head标签中填写link标签
<link type="text/css" rel="stylesheet" href="p.css" />
type mime类型
rel 类型

href css文件路径

3.CSS的选择器
1>标签选择器

语法: 标签名 {
属性键:属性值;
}

如：
<style type="text/css">
p{
color：red;
}
</style>
<p>HelloWorld</P>

2>ID选择器
id作为唯一标识,要唯一
语法: #ID {
属性键:属性值;
}
如：
#one{
color:red;
}
<p id="one">HelleWorld</p>
3>class选择器
class属性可以随意重复.

语法: .CLASS名称 {
属性键:属性值;
}

如:
.one{
color:red;
}

<p class="one">HelleWorld</p>

<h1 class="one">HelleWorld</h1>

4>选择器分组
语法: 选择器1,选择器2...... {
属性键:属性值;
}

<style type="text/css">
.one,#two {
color:yellow;
}

</style>
<p class="one" >HelleWorld</p>
<p id="two" >HelleWorld</p>
<p>HelleWorld</p>
<p class="one" >HelleWorld</p>
<h1 class="one" >HelleWorld</h1>

5>伪类选择器
指的是选择的某个标签的某种状态
常见状态有4种,a标签最全.
l link 没有点击过的状态
v visited 访问过
h hover 鼠标悬浮
a active 激活状态(鼠标点下去没有弹起)

如：
<style type="text/css">
a:link {
color:red;
}
a:visited {
color:green;
}
a:hover {
color:blue;
}
a:active {
color:yellow;
}
</style>

4.CSS的基本语法
选择器 {
属性键:属性值;
属性键:属性值1 属性值2 ....;

}
如：
1、字体
p {

font-size: 100px;
font-family: 黑体;
font-style: italic;
font-weight: 900;
font-variant: small-caps;
}
同：font :italic small-caps 900 100px 黑体;
2、背景
body {

background-color: pink;
background-image: url("001.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
同：background : green url("001.jpg") no-repeat fixed center;

3、注释:与java中多行注释相同
/* 注释内容 */
5.CSS的常用属性
单位:(了解)
颜色单位 Color Units
#RRGGBB rgb ( R,G,B ) Color Name
长度单位 Length Units
em ex px像素(常用) pt pc in cm mm
单位换算：1in = 2.54cm = 25.4 mm = 72pt = 6pc
属性:
color ==> 文字颜色
font-family ==> 文字样式
font-size ==> 文字大小
font-style => 文字样式(斜体..)
font-weight => 文字加粗
font-variant => 异性字

6.盒子模型
1、典型标签：

块级标签: 占的是一行.
行内标签: 占行内的一部分. 不能嵌套块级标签.

块级: <div> <p> <ol>
行内: <span> <font> <a>
2、div嵌套：
<style type="text/css">
div{
border-color: red;
border-width: 1px;
border-style: solid;
}

#one{

width: 200px;
height: 300px;
/*
内边距:
注意,内边距会改变自身的宽高.

*/
padding-left: 100px;
}

#two{
width: 100px;
height: 100px;
/*
外边距
margin-left: 100px;
}

</style>
<div id="one">
<div id="two"></div>
</div>
3、内外边距的4个复合属性：
<style type="text/css">
div{
/*
border-color: red;
border-width: 1px;
border-style: solid;
*/
border: 1px solid red;

width: 100px;
height: 100px;
}
#one{
/*
1个属性时: 4个方向.
2个属性时: 第一个属性决定上下第2个决定左右
3个属性时: 上左右下
4个属性时: 上右下左(顺时针)
*/
padding: 10px 30px 50px 80px;
}
</style>

猜你喜欢