标签：normal 头部 cti 第一个 password ini repeat 外链 .com
css能够使网页元素的样式更加丰富，让网页的内容和样式拆分开，CSS是Cascading Style Sheets的首字母的缩写，意思是层叠样式表，html只负责文档的结构和内容，内容的表现形式交给CSS，html文档变得更加简洁。
css基本语法：
选择器：{属性：值；属性：值}
如：
div{
width:100px;
height:100px;
background:gold;
}
css引入方式：
1：内联式：通过标签<style>属性，在标签上直接写样式：
<style="width:100px;height:100px;">.....</style>
2：嵌入式：通过style标签，在网页上创建嵌入式的样式表
<style>
div{
width:100px;
height:100px‘
}
</style>
3:外链式:通过link标签，链接外部样式文件写到页面中
<link rel="stylesheet" type="text/css" href="css文件地址">
CSS选择器：
1：标签选择器，一般用于通用的设置
div{ color:red}
....................
<div>这是第一个div</div>
<div>这是第二个div</div>
2:类选择器：通过类名来选择元素，一个类可应用于多个元素，一个元素可以使用多个类
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
.................
<div class="blue">....</div>
<h3 class="blue big ">.....</h3>
<p class="blue big box">.....</p>
3:层级选择器：主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器，可以与标签选择器结合使用。
.con{width:300px;height:80px;background:red}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
........................
<div class="con">
<span>....</span>
<a href="#" class="pink">.......</a>
<a href="#" class="gold">......</a>
</div>
<span>........</span>
<a href="#" class="pink">.....</a>
4:id选择器，使用"#名字"表示
<style>
#red{
width: 300px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div id="red">
</div>
</body>
常用的布局样式属性：
width:设置元素的宽度
height:设置元素的高度
background:设置元素的背景颜色或背景图片
border:设置元素的四周边框，（border:1px solid red;(solid:表示实心线，dotted:点线；double:双线；dashed:虚线)）
也可以拆分写成四个边的写法
border-top:设置顶边边框
border-left:设置左边边框
border-right:设置右边边框
border-bottom:设置底边边框
background-image:url(img地址)
background-repeat:repeat-y;
例如：
div{
width: 1000px;
height: 300px;
/* background: red; 设置背景颜色 */
background-image: url(../img/banner.jpg);
background-repeat: repeat-x;
/* repeat-y: 背景图片竖着放
no-repeat:图片只会出现一次*/
background-repeat: repeat-y;
}
padding:设置元素包含的内容和元素边框的距离，即为内边距，同样可以拆分为：padding-top,padding-right,padding-bottom,padding-right;
float设置元素浮动，浮动可以让块元素排列在一起，浮动分为左浮动，有浮动，float:left; float:right;
小于号：< 大于号：> 缩进：$nbsp;
margin：外边距
/* 1个参数表示上下左右
2个参数表示上下,左右
3个参数表示上,左右,下
4个参数表示上,右,下,左*/
margin: 10px 20px 40px 50px;（顺时针）
音频链接：<audio src="音乐地址...." controls="controls">XXXXX</audio>
文本常用的样式属性一：
color:设置文字的颜色
font-size:设置文字的大小
font-family:设置文字的字体。如：font-family:"微软雅黑";
font-weight:设置文字是否加粗，font-weight:bold;设置加粗。 font-weight:normal;不加粗
line-height:设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px
text-decoration:设置文字的下划线，text-decoration:none;将文字的下划线去掉
text-align:设置文字水平对齐方式，如：text-align:center;设置水平居中
text-indent:设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24
样式中的注释：
/* 设置头部的样式*/
//使用p标签，系统会自动增加16px，如果想要对齐，需要将margin重新设置为0
p{
margin: 0;
}
........................
<boby> <p>0000000</p></boby>
span标签与div标签的区别：
span标签表示一个透明的盒子，作用和div差不多，但使用span不会自动换行，div可以自动换行
form:设置表单，action表示动作，需要设置提交到哪里的url地址，method：请求方法，get和post，name作用是把当前端的数据再提交到后台服务器的时候，需要把name的属性一起提交
<form action="http://www.baidu.com" method="get">
用户名:<input type="text" name="usr"/><br />
密码:<input type="password" name="pwd" /><br />
<input type="submit" value="提交" />
</form>
常用的表单元素：
<label>:标签为表单元素定义文字标注
<input>标签定义通用的表单元素
type属性：
“text”:定义单行文本输入框
"password":定义密码输入框
"radio"：定义单选框
"checkbox":定义复选框
"file":定义上传文件
"submit“:定义提交按钮
"reset":定义重置按钮
"button"定义一个普通按钮
<value>属性定义表单元素的值
<name>属性，定义表单元素的名称，此名称是提交数据时的键名
<textarea>定义多行文本输入框
<select>定义下拉表单元素。<option>与<select>标签配合使用
例子：
<body>
用户名:<input type="text" /><br />
密码:<input type="password" /><br />
<label>性别:</label>
<!-- 定义name属性，每次只可以点击一个，否则两个都可选择，checked:默认值 -->
<input type="radio" name="sex"/ checked="checked">男
<input type="radio" name="sex" />女
<label>兴趣爱好:</label>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球<br />
<label>请上传你的玉照:</label><input type="file" /><br />
<label>自我介绍:</label><textarea></textarea><br />
<label>请选择城市:</label>
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
</select><br />
<input type="submit" value="提交" />
<input type="button" value="普通按钮" />
<input type="reset" value="重置"/>
</body>
返回顶部实例：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="top">1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<a href="#top">返回顶部</a>
</body>
</html>
标签：normal 头部 cti 第一个 password ini repeat 外链 .com
原文地址：https://www.cnblogs.com/zhouzetian/p/9665360.html
