黑马程序员—HTML+CSS系列 (二)

最新推荐文章于 2023-03-27 22:34:14 发布

BuHuanLiaoxxxxx

最新推荐文章于 2023-03-27 22:34:14 发布

阅读量740

点赞数

分类专栏： HTML+CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/piaizhe/article/details/9564337

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

---------------------- ASP.Net+Android+IO开发S、 .Net培训、期待与您交流！ ----------------------

CSS

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

三种样式表

推荐把尽可能多的样式写到单独的css文件中，这样可以复用，美工人员和开发人员很好的分工。
只有页面特有的样式才写到<style>中
只有元素特有的样式才写到元素的style属性中。
如果不同级别的样式有冲突，详细级别、子元素的会覆盖更高级别、父元素的
内联样式(行内样式)

<!-- 内联样式(行内样式) -->
    <input type="text" value="" style="color:Red"/>

嵌入样式

<!-- 内嵌样式 -->
    <style type="text/css">
        P
        {
       	    COLOR:Red;
       	    font-weight:bold;
       	}
       	input
       	{
       		color:Black;
       		width:100px;
       		background-color:Gray;
       	}
    </style>

外部样式

<!-- 外部样式 -->
    <link href="css/main1.css" rel="stylesheet" type="text/css" />

就近原则

以离元素最近的样式表为准
常见样式
复合样式background border
css单位 % px em
background-color
color
border-style
border-width
border-color
display:none、block块、inline内嵌
cursor
list-style-type:none
float
clear 清除浮动
margin 间距
padding 填充
position 相对绝对固定

div
{
	color:Blue;
	background-color:Olive;
	/*
	border-style:groove;
	border-color:Red;
	border-width:5px;
	*/
	border-left:solid 5px red;
	/*
	border-left-style:solid;
	border-left-width:5px;
	border-left-color:Red;
	*/
	border-top-style:dotted;
	border-top-width:5px;
	border-top-color:Black;
	width:1000px;
	height:200px;
	/* inline 内嵌 */
	display:inline;
}

*
{
	/* 所有的元素 */
	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;
}

样式选择器
标签选择器 input

input
{
	color:Green;
}

类选择器 .class

.warning
{
background:Yellow;
}
<td class="warning">bb</td>

id选择器 #wrap

#username
        {
        	font-size:xx-large;
        }
<input id="username" type="text" value="aaaaaaaaaaaa" />

标签+类选择器

 input.accountno
        {
        	  text-align:right;
        	  color:Red;
        }
        label.accountno
        {
        	font-style:italic;
        }
<input class="accountno" type="text" value="111111111111111" />
<label class="accountno">333333333333333333</label>

* 包含选择器 p strong

P strong
{ 
   background-color:Yellow
}
<!--表示P标签内的strong标签内的内容使用的样式-->
<strong>fadsfasdfads</strong>
<p><strong>adfasfd</strong></p>

* 组合选择器 h1,h2,input{}

H1,H2,input
{
   background-color:Green
}
<h1>nihao</h1>
<input type="text" value="test" />

伪选择器为标签的不同状态设定样式

<head>
    <title></title>
    <style type="text/css">
        a
        {
        	text-decoration:none;
        }
        a:visited
        {
        	color:Gray;
        }
        a:link
        {
        	color:Red;
        	
        }
        a:hover
        {
        	color:Black;
        	font-style:italic;
        }
        a:active
        {
        	color:Yellow;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

表格的细边框

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
        th,td
        {
            border-top:solid 1px red;
            border-left:solid 1px red;
        }
        td
        {
        	/* 文本水平对齐 */
        	text-align:center;
        	/* 文本纵向对齐 */
        	vertical-align:bottom;
        }
        table
        {
        	border-bottom:solid 1px red;
        	border-right:solid 1px red;
        }
    </style>
</head>
<body>
    <table cellspacing="0px" width="500px" height="400px">
		<!-- table row 行 -->
		<tr>
			<!-- column span 跨列 -->
			<th colspan="4">学生信息表</th>
		</tr>
		<tr>
			<!-- table head表头 -->
			<th>姓名</th>
			<th>学号</th>
			<th>性别</th>
			<th >年龄</th>
		</tr>
		<tr >
			<!-- table data 单元格 -->
			<td>刘备</td>
			<td>001</td>
			
			<td>男</td>
			<td>18</td>
		</tr>
		<tr>
			<td>关羽</td>
			<td>002</td>
			<td>男</td>
			<td>18</td>
		</tr>
		<tr>
			<td>张飞</td>
			<td>003</td>
			<td>男</td>
			<td>18</td>
		</tr>
	</table>
</body>
</html>

ul 做菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
        *
        {
        	margin:0px;padding:0px;
        }
        #h li
        {
        	float:left;
        	list-style-type:none;
        	width:70px;
        }
        .line
        {
        	margin-right:20px;
        	width:1px;
        	height:30px;
        	border-left:solid 1px red;
        }
        #v li
        {
        	clear:left;
        	list-style-type:none;
        	width:200px;
        	border-bottom:solid 1px red;
        	padding-top:10px;
        	padding-bottom:0px;
        }
        #jb51_yxj
        {
        /* absolute绝对位置 relative相对位置 fixed固定位置*/
            position:fixed;
            background-color: #fff;
            width: 250px;
            overflow: hidden;
            
            right: 0px;
            bottom: 0px;
        }
        #d
        {
        	position:fixed;
        	top:100px;
        	left:100px;
        	background-color:Red;
        }
    </style>
</head>
<body>
    <div id="d">adsasdf</div>
    <ul id="h">
        <li>Home</li>
        <li class="line"></li>
        <li>Blog</li>
        <li class="line"></li>
        <li>Photos</li>
        <li class="line"></li>
        <li>About</li>
    </ul>
    
    <ul id="v">
        <li>Home</li>
        <li>Articles</li>
        <li>Gallery</li>
        <li>Affiliates</li>
        <li>Archives</li>
    </ul>
    <br />
     <br />
      <br />
       <br />
        <br />
         <br />
          <br />
           <br />
            <br />
            
          <br />
       <br />
      <br />
      <br />
       <br />
     <br />
      <br />
       <br />
        <br />
         <br />
          <br />
           <br />
            <br />
            
          <br />
       <br />
      <br />
      <br />
    <div id="jb51_yxj">
        <img src="images/51xp.gif" />
    </div>
</body>
</html>

布局
表格布局

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
        td
        {
        	border:solid 1px red;
        }
    </style>
</head>
<body>
    <table width="980px" height="500px">
        <tr>
            <td colspan="2">1</td>
        </tr>
        <tr>
            <td>1</td>
            <td style="font-weight: 700">2</td>
        </tr>
    </table>
</body>
</html>

框架布局

<html xmlns="http://www.w3.org/1999/xhtml" >
<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>
</html>

div+css布局

style.css

*
{
	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;
}

页面

<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>
                aaaaaaaaaa aaaaaaaaaaa aaaa aaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaa
                aaaaaaaa aaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaaa
                
              
            </div>
            <div id="content">内容</div>
        </div>
        <div id="footer">版权</div>
    </div>
</body>
</html>

---------------------- ASP.Net+Android+IO开发S、 .Net培训、期待与您交流！ ----------------------