自学_CSS<二>

CSS

CSS(层叠样式表)是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。

CSS主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤!

  • 元素内联,直接将样式写入元素的style属性中,<input type="text" readonly="readonly" style="background-color: #FF00FF" />style="color:Red;background-color: #FF00FF"为元素内联,适用于样式没有可复用性的场合。

  • 页面嵌入:在head中加入

<style type="text/css">
input{border-color:Yellow;color:Red;}
</style>

表示页面中所有input都是采用指定的样式。适合于样式复用,减小页面体积

<style type="text/css">
	P
	{
	color:Red;
	font-weight:bold;
	}
</style>

所有的P标签都变成红色字体,加粗。

  • 外部引用,将css内容写入css后缀的文件
    div{background:yellow}
    然后在页面中引用,在head中加入
    <link type="text/css" rel="Stylesheet" href="s1.css" />
    适合于多个页面共享css。

  • 更变原则:就近原则

常见样式

  • css计量单位:css中表示宽度、距离时有多种计量单位:px(像素)、30%(百分比)、em(相对单位)等。width:20px。
  • background-color:Red;背景颜色;color:文本颜色
  • 复合样式 background border
  • border-style:solid;边框风格,实线solid(默认是没有),还有dotted(点)等值;border-color:边框颜色;border-width:边框宽度(默认是0)。例子:style="border-color:Red;border-width:1px;border-style:dotted;"
  • display:元素是否显示,可选值none(不显示,不占地儿)、block (显示为块级元素,此元素前后会带有换行符。)、inline(显示为内联元素,元素前后没有换行符 )等。
  • cursor,鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接上的手)、text(输入Bean)、wait(忙沙漏)、help(帮助)等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。
  • LI不显示圆点:LIST-STYLE-TYPE: none;一般设在li或者ul上
  • 应用:图片:不显示边框,见备注
    图片:不显示边框
IMG {
	border:0px;BORDER-BOTTOM: medium none;
	BORDER-LEFT: medium none; 
	BORDER-TOP: medium none; 
	BORDER-RIGHT: medium none
}

例子 外部引用

*
{
	/* 所有的元素 */
	margin:0;
	padding:0;
	color:Red;
}
body
{
	background:red url(/images/back_image.GIF);
}


span
{
	/* block 块 
	display:block;*/
	cursor:pointer;
	color:Blue;
	text-decoration:underline;
}
input
{
	color:Green;
}

li
{
	
	/* 去掉ul前面的黑点 */
	list-style-type:none;
}

样式选择器

对于非元素内联的样式需要定义样式选择器,通俗的说就是这个样式适合于哪些元素,三种:标签选择器class选择器id选择器

  • 标签选择器 input{border-color:Yellow;color:Red;},对于指定的标签采用统一的样式

  • class选择器,以定义一个命名的样式,然后在用到它的时候设定元素的class属性为样式的名称,还可以同时设定多个class,名称之间加空格

.d1
{
	color:Red;
	width:100px;
}
.d2
{
	color:Blue;
	width:200px;
}
.d3
{
	color:Green;
	width:300px;
}
<div class="d1">
	123123123
</div>
<div class="d2">
	abc
</div>
<div class="d3">
	啊打发
</div>

样式名称开头加“.”

.warning{background:Yellow;}
.highlight{font-size:xx-large;cursor:help;}
<table>
<tr>
<td class="highlight">aaa</td>
<td class="warning">bb</td>
<td class="highlight warning">ccc</td>
</tr>
</table>
  • 标签+类选择器:通过指定标签来确定不同的类适用范围
label.name
{
	background-color:Gray;
}
input.name
{
	color:Blue;
}
<label for="name" class="name">用户名:</label>
<input class="name" id="name" type="text" value="" />
  • id选择器:与类选择器不同的地方就是.改成了#。
#wrap
{
	border:solid 1px blue;
	width:300px;
	height:300px;
}
<div id="wrap">
main
</div>
  • 包含选择器:设置div中strong标签的格式,div中所有strong
div  strong
{
	color:Red;
}
<strong>测试</strong>
<div>
	<strong>这是左边栏</strong>
	left
</div>
  • 后代选择器:直接属于div的strong才会属于这个样式。
div strong
{
	color:Red;
}
<div>
	<strong>这是左边栏</strong>
	left
</div>
  • 组合选择器 :多个标签一个样式,组合选择器可以使用类选择器.h3,.p,.span {}
h3,p,span 
{
	color:Yellow;
}
<h3>标题3</h3>
<p>这是段落</p>
<span>这是span</span>
  • 伪选择器:超链接使用
    • A:visited:超链接点击过的样式;A:visited {TEXT-DECORATION: none}下划线
    • A:active:选中超链接时的样式;A:active
    • A:link:超链接未被访问时的状态;A:link
    • A:hover:鼠标移到超链接时的状态。A:hover
a:visited
{
	color:Gray;
}
a:link
{
	color:Red;
	
}
a:hover
{
	color:Black;
	font-style:italic;
}
a:active
{
	color:Yellow;
}
<a href="http://www.itcast.cn">传智播客</a>
<a href="http://www.csdn.com">csdn</a>
<a href="http://www.cnbeta.com">cnbeta</a>
<a href="http://www.123.com">123</a>

传智博客视频_布局

布局的分类:表格布局,框架布局,div+css布局

  • 表格布局:表格套表格 ,代码多,table显示很慢,一块块的显示就比较麻烦,显示圆角就比较麻烦
  • 框架布局:多个页面来显示:
    • Frameset 框架页里不能有body
<head>
<title></title>
</head>
 
<frameset rows="30%,*">
  <frame name="top" src="top.htm" noresize="noresize"/>
  <frameset cols="20%,*">
    <frame name="left" src="left.htm" noresize="noresize"/>
    <frame name="main" src="main.htm" noresize="noresize"/>
  </frameset>
</frameset>

left.html 
<body>
<ul>
<li><a href="1-注册页面.htm" target="main">注册</a></li>
<li><a href="5-选择器.htm" target="if">登陆</a></li>
</ul>
</body>
    • iframe 嵌入页面
<iframe src="iframe.htm" name="0" width="0" height="0"></iframe>
<body>
adsfasdf
asdf
<iframe src="1-注册页面.htm" width="0" height="0"></iframe>
adsf
</body>

main.html

iframe:在一个页面中嵌入一个页面

<body>
<iframe src="1-注册页面.htm" width="500px" height="200px" name="if"></iframe>
adsf
</body>
  • div+css布局:

  • 网页布局就是“这块内容显示在左边,那两块内容并排显示,那块内容漂浮在页面上”。

  • 不要使用<table>进行布局,因为:table可能会在所有tr、td加载完成以后才显示,所以加载完成之前界面是一片空白;用table布局会将布局方式写在html中,违反了“语义性”原则;用table会影响搜索引擎的抓取,不利于SEO。因此Table用来表达真是表格状数据的东西,布局用Div(层)+Css来做,Div用来圈定元素,CSS用来定义元素的位置。

  • Div+CSS就是将要布局的内容用<div>切成块,然后使用css描述每个块的大小、位置等。

  • 布局最重要的一个属性就是float,

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="head">
<div id="logo">
<img src="images/back_image.GIF" width="100px" height="50px" /></div>
<div id="menu">
<ul>
<li>首页</li>
<li>播客</li>
<li>相册</li>
<li>关于</li>
</ul>
</div>
</div>
<div id="body">
<div id="nav">
<ul>
<li>好好学习</li>
<li>天天向上</li>
<li>不要睡觉</li>
</ul>

</div>
<div id="content">内容</div>
</div>
<div id="footer">版权</div>
</div>
</body>
</html>

*
{
	margin:0px;
	padding:0px;
}
body
{
	background-color:Gray;
	
}
#wrap
{
	width:98%;
	height:500px;
	margin:0px auto;
}

#head
{
	height:150px;
	background-color:Red;
}
#head #menu
{
	margin:80px auto 0px auto;
	padding-left:200px;
}
#head #menu ul
{
	width:400px;
}
#head #menu li
{
	float:left;
	width:100px;
	list-style-type:none;
}
#body
{
	height:800px;
	background-color:White;
}
#body #nav
{
	/* 强制英文换行 word-break:break-all; */
	/* 溢出后显示滚动条 */
	overflow:auto;
	background-color:Blue;
	width:200px;
	float:left;
}
#body #nav ul
{
	padding-top:100px;
}
#body #nav li
{
	list-style-type:none;
	height:30px;
	padding-left:30px;
	
}
#body #content
{
	background-color:Green;
}

posted @ 2018-10-22 15:44  阿杜888  阅读(164)  评论(0编辑  收藏  举报