java web
css部分
css样式:
是用来给html化妆的
如何使用样式?
1.内联样式/行内样式:
样式定义在单个html元素中
特点:只能在当前元素中使用
如:
<span style="color:red;">我是一只小小鸟</span>
2.内部样式:
样式定义在html页面的<head>中
特点:作用于当前整个页面
如:
<head>
<!--内部样式-->
<style>
span{
color:pink;
font-size:20px;
}
</style>
</head>3.外部样式/外联样式:
定义一个外部的css样式文件,以.css结尾,在html中引入这个.css文件
如:
style.css
span{
border:1px solid red;
color:blue;
font-weight:bold;
}
...
demo.html
<head>
<!--rel和type都可以省略-->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>css样式语法规范:
css可以由多个样式规则组成
每个样式的规则有两个部分(选择器和样式声明)
如:
h1{
color:red;
font-weight:bold;
} h1是选择器,样式必须用大括号括起来
大括号中的所有样式都必须用分号(;)间隔,多个样式是样式叠加
样式包括两个部分,样式的属性和样式的值
样式的属性和样式的值用冒号(:)间隔
css样式规则特性
-继承性:父元素的css的声明可以被子元素继承
-层叠性:同一元素存在多个css,如果不冲突可以叠加
-优先级:同一个元素存在多个css,如果有冲突,优先级高的生效
浏览器缺省设置 外部样式或内部样式 内联样式(由低到高)
css选择器:
1.元素选择器
通过元素的名称来选择css作用的目标
如:
/*所有的span的字都是红色*/
span{
color:red;
}2.类选择器
类选择器允许以一种独立于文档元素的方式来指定样式
所有能够附带class属性的元素都可以使用此样式声明
如果页面中有多个不同元素需要重用同样的样式效果,可以用类选择器
.className{样式的定义}
如:
/*类选择器*/
.classname{
font-weight:bold;
}
<div class="classname">演示使用类选择器</div>3.id选择器
id选择器以一种独立于文档元素的方式来指定样式
如:
/*id选择器*/
#idname{
background-color:blue;
}
<div id="idname">演示使用id选择器</div>4.派生选择器
-子选择器:
用于选择指定标签的第一代子元素,符号是>
某个选择器>某个子元素的名称{}
-后代选择器:
用于选择指定标签元素的后辈元素,符号是空格
某个选择器 某个子元素的名称{}
如:
<ul class="food1">
<li>水果
<ul>
<li>西瓜</li>
<li>桃子</li>
<li>香瓜</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>黄瓜</li>
<li>茄子</li>
<li>豆角</li>
</ul>
</li>
<li>肉类
<ul>
<li>牛肉</li>
<li>猪肉</li>
<li>鸡肉</li>
</ul>
</li>
</ul>
/*子选择器*/
.food1>li{
border:1px solid red;
list-style-type:square;
}
/*后代选择器*/
.food1 li{
border:1px solid red;
list-style-image:url("E://a.png");
}
5.伪类选择器
伪类用于设置同一个元素的不同状态下的样式
常见的伪类:
:link 向未被访问的超链接添加样式
:visited 向已经访问的超链接添加样式
:active 向激活的样式添加样式
:hover 当鼠标悬停至元素上方时,向该元素添加样式
:focus 当元素获取焦点时,向该元素添加样式
如:
<!--伪类选择器-->
<a href="#" >这是一个超链接,用于演示伪类选择器</a>
<br />
<input class="btn" type="button" value="按钮" />
<br />
<input class="txt" type="text" />
<br />
<input class="txt1" type="text" />
/*伪类选择器*/
a:link{
color:green;
}
a:visited{
color:black;
}
.btn:active{
background-color:yellow;
}
.txt:hover{
background-color:yellow;
}
.txt1:focus{
background-color:yellow;
} border样式:
border属性是用来设置元素的边框
四边设置:
-border:width值 style值 color值;
比如:
border:1px solid red;
单边设置:
border-left:width值 style值 color值;
border-right:width值 style值 color值;
border-top:width值 style值 color值;
border-bottom:width值 style值 color值;
如:
<!--演示盒子模型-->
<div class="borderclass">
<div class="box1">
这是演示盒子模型
</div>
</div>
<div class="borderclass">
<div class="box2">
这是演示盒子模型
</div>
</div>
/*演示盒子模型*/
.borderclass{
border:1px solid red;
width:200px
}
.box1{
border:2px dotted green;
width:70px;
/*四边设置*/
margin:30px;
padding:10px;
}
.box2{
border:2px dotted green;
width:70px;
/*单边设置 上 右 下 左*/
margin:10px 20px 30px 40px;
padding:10px 20px 30px 40px;
}背景:
背景色:
background-color:red;
注意red还可以用#6位16进制数来替代
背景图片:
background-image:url('图片的路径(相对或绝对)');
注意:
默认值是none,表示没有没有背景图片
如果设置图片就用url方式指定图片路径
默认情况下,背景图片在水平和垂直方向上重复出现
background-repeat属性可以控制背景图片的平铺效果
background-repeat的取值:
-repeat:在垂直方向和水平方向重复,
-repeat-x:仅在水平方向重复
-repeat-y:仅在垂直方向重复
-no-repeat:仅显示一次
如:
<!--演示背景使用-->
<div class="divbackgroundimage">
哈哈哈哈哈哈哈哈哈哈
</div>
.divbackgroundimage{
border:1px solid red;
height:500px;
width:800px;
background-image:url("C://Users//PC//Desktop//第二阶段javaweb//老师笔记//day02//box1.png");
background-repeat:no-repeat;
}文本格式:
指定字体:
font-family:value1,value2,value3;
value指的是字体(前提当前系统中存在字体)
指定大小:
font-size:value;
value是一个具体像素值
指定加粗
font-weight:normal/bold/100-900
文本颜色:
color:value
value是一个具体颜色的单词,也可以是一个#6位16进制数
文本排列
text-align:left|right|center;
文本修饰: underline 下划线
text-decoration:none|underline;
行高:
line-height:value
value是一个具体的数值
首行文本缩进:
text-indent:value
value是一个具体的数值表格样式:
表格同样可以使用box模型(边框,内边距,宽,高),以及文本样式
表格特有的样式属性
如果设置了单元格的边框,相邻单元格的边框会单独显示
类似于双线边框
border-collapse属性:合并相邻的边框
设置是否将表格边框合并为单一边框
属性的值:border-collapse:separate|collapse;
补充内容th:也是单元格,代表表头,表头的内容是黑体加粗居中
如:
<!--演示表格table的盒子模型-->
<br />
<table class="tableclass">
<tr>
<th>aa</th>
<th>bb</th>
<th>cc</th>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
<td>gg</td>
</tr>
<tr>
<td>hh</td>
<td>ii</td>
<td>jj</td>
</tr>
</table>
/*表格table的盒子模型*/
.tableclass{
border:1px solid red;
width:300px;
margin:30px auto;
text-align:center;
border-collapse:collapse;
}
th{
background-color:cyan;
}
tr{
background-color:pink;
}
th,td{
border:1px solid red;
}
tr:hover{
background-color:green;
}页面元素定位:
定义元素框相对于其正常位置应该出现的位置,
或者相对于父元素,另一个元素甚至浏览器窗口本身的位置
-流定位(推荐)
从上到下顺序排列,<div>是从上到下
从左到右排列<span>是从左到右
-浮动定位(推荐)
让元素脱离普通的流定位
将浮动元素放置在父元素的左边或右边
浮动元素依旧位于父元素内
浮动的框可以向左或向右移动,直到他的外边框边缘碰到父元素
或另一个浮动的边框位置
经常浮动定位做网页的布局
float:none|left|right
-相对定位
-绝对定位
-固定定位
列表样式:
list-style-type属性用于控制列表中列表项的样式
-无序列表ul:出现在各列表左边的圆点
取值:
none 无符号
disc 实心圆 默认
circle 空心圆
square 实心方块
-有序列表ol:可能是字母,数字,或其他的计数体系符号
取值:
none 无标记
dicimal 数字(1,2,3...)
lower-roman 小写罗马(i,ii,iii...)
upper-roman 大写罗马(I,II,III...)
list-style-image属性使用图像来替换列表项的标记
取值:
list-style-image:url('图片的路径');
注:例子见子选择器和后代选择器
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
