第六章元素应用css

标签：color 元素 height width background 第六章 font border css

6.1 使用css设置字体样式

6.1.1.字体类型

h1{				
font-family: fangsong;
}

6.1.2.字体大小

font-size: 25px;

6.1.3.字体粗细

font-weight: 500;

6.1.4.字体倾斜

font-style: italic;

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

text-align: center;

6.2.2.行高

p{
	line-height: 200%;
			}

6.2.3.文本的修饰.

			#id1{
				font-weight: 900;
			}
			#id2{
				font-style: italic;
			}
			#id3{
				text-decoration: underline;
			}
			#id4{
				text-decoration: overline;
			}
			#id5{
				text-decoration: line-through;
			}

6.2.4.段落首行缩进

			.first{
				letter-spacing: 2em;
			}

6.2.5.首字下沉

			.second::first-letter{
				float: left;
				font-size: 2em;
				font-weight: 900;
				
			}

6.2.6.字符间距

			.first{
				letter-spacing: 2em;
			}

6.2.7.文本的截断

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本截断的设置</title>
    <style type="text/css">
        h1 {
            font-family: '黑体';
        }
        p {
            font-family: Arial, "Times New Roman";
        }
        .ellipsis {
            width: 260px;
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <h1>经营理念</h1>
    <p class="ellipsis">用户是上帝，也是我们的衣食父母，坚持用户利益至上，不断倾听和深解用户需求，不断给用户惊喜，不断提供超预期的体验和服务，不断创造新的用户价值。</p>
</body>
</html>

6.2.8.文本的颜色

			h1{
				color: #ff0000;
			}

6.2.9.文本的背景颜色

			.first{
				background-color: #ff0000;
			}

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

			img{
				border-color: ##ff0000 #00ff00 #0000ff #000000;
				border-width: 10px;
				border-style: dashed solid dotted double;
			}

6.3.2.图像缩放

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像缩放的设置</title>
    <style type="text/css">
        #box {
            padding: 10px;
            width: 1000px;
            height: 700px;
            border: 2px dashed #9c3;
        }
        #box img.test1 {
            width: 30%;
            height: 40%;
        }
        #box img.test2 {
            width: 150px;
            height: 280px;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/4.5.4.jpg">
        <img src="img/4.5.4.jpg" class="test1">
        <img src="img/4.5.4.jpg"" class="test2">
    </div>
</body>
</html>

6.3.3.设置背景图像

			body{
				background-color: #f00;
				background-image: url(img/4.5.4.jpg);
			}

6.3.4设置背景重复

1.水平重复

			body{
				background-color: #f00;
				background-image: url(img/th.jpg);
				background-repeat: repeat-x;
			}

2.垂直重复

			body{
				background-color: #f00;
				background-image: url(img/th.jpg);
				background-repeat: repeat-y;
			}

3.重复

			body{
				background-color: #f00;
				background-image: url(img/th.jpg);
				background-repeat: repeat;
			}

6.3.5.背景图像定位

6.3.5.1.使用关键字进行背景定位

< html>
< head>
< meta charset="UTF-8">
< title>背景定位设置</ title>
< style type=" text/ css">
 body{
 background- color:#7bc144;
# box{
 width:400px;
 height:700px;
 border:6px dashed # fff;
 background- image: url( images/ fu. JPG);/
 background- repeat: no- repeat;
 background- position: center bottom;
</ style>
</ head>
< body>
<div id=1'box''></div>
</ body>
</ html>

6.3.5.2.使用长度进行背景定位

# box{
 width:900px;
 height:700px;
 border:6px dashed # fff;
 background- image: url( images/ fu. JPG);
 background- repeat: no- repeat;
 background- position:150px 70px;
}

6.3.5.3.使用百分比进行背景定位

# box{
 width:900px;
 height:700px;
 border:6px dashed # fff;
 background- image: url( images/ fu. JPG);
 background- repeat: no- repeat;
 background- position:100% 50%;
}

6.4 使用css设置表单样式

1.修饰文本域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.text1{
				border: 1px solid #f60;
				color: #03c;
			}
			.text2{
				border: 1px solid #c3c;
				height: 20px;
				background-color: #fff url(img/password_bg.JPG) left center no-repeat;
				padding-left: 20px;
			}
			.area{
				border: 1px solid #00f;
				overflow: auto;
				width: 99%;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<p>
			<input type="text" name="normal"/>
			默认样式文本域
		</p>
		<p>
			<input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1"/>
			改变边框颜色和文字颜色的文本域，看起来更加形象直观
		</p>
		<p>
			<textarea name="cha" cols="45" rows="5" class="area">改变边框颜色的多行文本域</textarea>
			
		</p>
	</body>
</html>

2.修饰按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修饰按钮</title>
		<style type="text/css">
			.btn01{
				background: url(img/btn_bg02.jpg); repeat-x:;
				border: 1px solid #f00;
				height: 32px;
				font-weight: bold;
				padding-top: 2px;
				cursor: pointer;
				font-size: 14px;
				color: #fff;
			}
			.btn02{
				background: url(img/btn_bg03.jpg) repeat-x;
				width: 107px;
				height: 37px;
				border: none;
				font-size: 14px;
				font-weight: bold;
				color: #d84700;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<p>
		<input name="button" type="submit" value="提交"/>
		默认风格的 提交 按钮
		</p>
		<p>
			<input name="button01" type="submit" class="btn01" id="button01" value="自适应宽度按钮"/>
		</p>
		<p>
			<input name="button02" type="submit" class="btn02" id="button02" value="免费注册"/>
			固定背景图片的按钮
		</p>
	</body>
</html>

3.登录界面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录表单的制作</title>
    <style type="text/css">
        .login {
            margin: 0 auto;
            width: 280px;
            padding: 14px;
            border: dashed 2px #b7ddf2; /* 2px虚线淡蓝色边框 */
            background: #ebf4fb;
        }
        .login * {
            margin: 0;
            padding: 0;
            font-family: 宋体;
            font-size: 12px;
            line-height: 1.5em;
        }
        .login h2 {
            text-align: center; /* 文字水平居中对齐 */
            font-size: 18px;
            font-weight: bold; /* 字体加粗 */
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: solid 1px #b7ddf2; /* 下边框为1px实线淡蓝色边框 */
        }
        .login .content {
            padding: 5px; /* 容器内容区域的样式 */
        }
        .login .frm_cont {
            margin-bottom: 8px; /* 内容区域的样式 */
        }
        .login .username input, .login .password input {
            width: 180px;
            height: 18px;
            padding: 2px 0px 2px 18px; /* 文本框左内边距18px，以便为背景图像预留空间 */
            border: solid 1px #aacfe4; /* 1px实线淡蓝色边框 */
        }
        .login .username input {
            background: #fff url(img/username.JPG) no-repeat left center;
        }
        .login .password input {
            background: #fff url(img/lock.JPG) no-repeat left center;
        }
        .login .btns {
            text-align: center; /* 文字水平居中对齐 */
        }
    </style>
</head>
<body>
    <div class="login">
        <h2>用户登录</h2>
        <div class="content">
            <form action="#" method="post">
                <div class="frm_cont username">
                    用户名：
                    <label for="username"></label>
                    <input type="text" name="username" id="username" />
                </div>
                <div class="frm_cont password">
                    密码：
                    <label for="password"></label>
                    <input type="password" name="password" id="password" />
                </div>
                <div class="btns">
                    <input type="submit" name="button1" id="button1" value="登录" />
                    <input type="button" name="button2" id="button2" value="注册" />
                </div>
            </form>
        </div>
    </div>
</body>
</html>

6.5本章案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>会员注册</title>
    <link type="text/css" href="CSS/style.css" rel="stylesheet"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 12px;
            color: #333;
        }
        ol, ul {
            list-style: none;
        }
        img, a {
            border: 0;
            text-decoration: none;
        }
        a {
            color: #333;
        }
        a:hover {
            color: #f00;
        }
        .loginLogo {
            width: 100%;
            border-bottom: #efefef 1px solid;
        }
        .logoMid {
            width: 1040px;
            margin: 0 auto;
        }
        .loginReg {
            height: 30px;
            line-height: 30px;
            text-align: right;
        }
        .loginReg a {
            color: #7bc144;
        }
        .loginReg a:hover {
            color: #f00;
        }
        .loginBox {
            width: 1050px;
            margin: 30px auto;
            position: relative;
        }
        .regList {
            height: 35px;
            line-height: 35px;
            margin-bottom: 30px;
            position: relative;
        }
        .regList label {
            float: left;
            width: 105px;
            margin-right: 10px;
            text-align: right;
            color: #999;
        }
        .regList input {
            margin: 0;
            padding: 0;
            width: 283px;
            height: 33px;
            border: 1px solid #373840;
            background: #feffdf;
            padding-left: 3px;
        }
        .regList input.yanzheng {
            width: 135px;
        }
        .regList img {
            left: 260px;
            position: absolute;
        }
        .xieyi {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            padding-left: 115px;
        }
        .xieyi input {
            position: relative;
            top: 2px;
        }
        .xieyi a {
            color: #7BC144;
        }
        .reg {
            padding-left: 115px;
            margin-top: 10px;
        }
        .chengnuo {
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="loginLogo">
        <div class="logoMid">
            <h1 class="logo" style="height: 71px; padding-top: 10px;">
                <a href="index.html">
                    <img src="../img/qqhlogo.jpg"/>
                </a>
            </h1>
            <div class="loginBox">
                <img src="../img/chengguo.jpg" width="295" height="393" class="chengnuo" />
                <form action="#.html" method="get" class="reg">
                    <div class="regList">
                        <label><span class="red">*</span>用户名</label>
                        <input type="text" />
                        <span style="color: #999;">请输入邮箱/用户名/手机号</span>
                    </div>
                    <div class="regList">
                        <label><span class="red">*</span>请设置密码</label>
                        <input type="password" />
                    </div>
                    <div class="regList">
                        <label><span class="red">*</span>请确认密码</label>
                        <input type="password" />
                    </div>
                    <div class="regList">
					                        <label><span class="red">*</span>验证码</label>
					                        <input type="text" class="yanzheng" />
					                        <img src="../img/yanzheng.jpg" width="103" height="38" />
					                    </div>
					                    <div class="xieyi">
					                        <input type="checkbox" id="agreement" />
					                        <label for="agreement">我已经阅读并同意</label>
					                        <a href="user-agreement.html">商城用户注册协议</a>
					                    </div>
					                    <div class="reg">
					                        <input type="submit" value="立即注册" />
					                    </div>
					                </form>
					                <div class="clears"></div>
					            </div>
					        </div>
					    </div>
					</body>
					</html>

标签：color,元素,height,width,background,第六章,font,border,css
From： https://blog.csdn.net/2301_80973106/article/details/142934270

6.1 使用css设置字体样式

6.1.1.字体类型

6.1.2.字体大小

6.1.3.字体粗细

6.1.4.字体倾斜

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

6.2.2.行高

6.2.3.文本的修饰.

6.2.4.段落首行缩进

6.2.5.首字下沉

6.2.6.字符间距

6.2.7.文本的截断

6.2.8.文本的颜色

6.2.9.文本的背景颜色

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

6.3.2.图像缩放

6.3.3.设置背景图像

6.3.4设置背景重复

1.水平重复

2.垂直重复

3.重复

6.3.5.背景图像定位

6.3.5.1.使用关键字进行背景定位

6.3.5.2.使用长度进行背景定位

6.3.5.3.使用百分比进行背景定位

6.4 使用css设置表单样式

1.修饰文本域

2.修饰按钮

3.登录界面

6.5本章案例

相关文章

赞助商

阅读排行

第六章 元素应用css

6.1 使用css设置字体样式

6.1.1.字体类型

6.1.2.字体大小

6.1.3.字体粗细

6.1.4.字体倾斜

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

6.2.2.行高

6.2.3.文本的修饰.

6.2.4.段落首行缩进

6.2.5.首字下沉

6.2.6.字符间距

6.2.7.文本的截断

6.2.8.文本的颜色

6.2.9.文本的背景颜色

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

6.3.2.图像缩放

6.3.3.设置背景图像

6.3.4设置背景重复

1.水平重复

2.垂直重复

3.重复

6.3.5.背景图像定位

6.3.5.1.使用关键字进行背景定位

6.3.5.2.使用长度进行背景定位

6.3.5.3.使用百分比进行背景定位

6.4 使用css设置表单样式

1.修饰文本域

2.修饰按钮

3.登录界面

6.5本章案例

相关文章

赞助商

阅读排行

第六章元素应用css