WEB_BASIC---02 CSS概述、CSS语法、CSS选择器、CSS声明
2018-03-28 09:34
447 查看
一、HTML表单<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表单元素
用来声明数据提交的范围
只有在此元素内的数据可以提交给服务器 -->
<!-- action属性用来声明数据提交的目标 -->
<form action="http://www.baidu.com">
<!-- 2.表单控件
用来让用户输入数据的
1）input元素（9个 ），它们之间用type元素区分-->
<!-- 文本框
value:设置默认值 maxlength:设置最大长度 readonly:设置只读 -->
<p>
账号:<input type="text" value="lcz" maxlength="10"/>
</p>
<!-- 密码框 属性同上 -->
<p>
密码:<input type="password">
</p>
<!-- 单选框 name:组名。同一组名互相排斥
checked设置默认选中-->
<p>
性别:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</p>
<!-- 多选框 checked:设置默认选中 -->
<p>
兴趣爱好:
<input type="checkbox" checked="checked"/>音乐
<input type="checkbox" checked="checked"/>看书
<input type="checkbox"/>打球
</p>
<!-- 文件框 -->
<p>
头像上传:<input type="file"/>
</p>
<!-- 隐藏框 -->
<p>
<input type="hidden" value="abc"/>
</p>
<!-- 按钮
submit：提交表单中的数据
reset：将表单中的数据重置为初始值
button:没有任何功能，需通过js定义功能 -->
<p>
<!-- 提交按钮 -->
<input type="submit" value="注册">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<input type="button" value="按钮">
</p>
<!--2)其他元素（3个） -->
<!-- label：用来管理表单中的文本 id:是元素的唯一标志，相当于元素的身份证号，任何元素都可以由id，程序员有义务保证元素的id不重复
可以将文本与空间绑定在一起，从而增加了控件的受力面积。-->
<p>
<input type="checkbox" id="xieyi"/>
<label for="xieyi">我已阅读并且自愿遵守此协议！</label>
</p>
<!-- select:下拉选 selected:设置默认选中 -->
<p>
城市:
<select>
<option>请选择</option>
<option selected="selected">北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
</select>
</p>
<!-- textarea:文本域 -->
<p>
简介：<br>
<textarea rows="10" cols="100">这是文本域的默认值</textarea>
</p>
</form>
</body>
</html>
二、CSSCSS指层叠样式表，样式定义如何显示HTML元素，样式通常存储在样式表中。 三、CSS如何使用内联方式：样式定义在单个的HTML元素中内部样式表：样式定义在HTML页的头元素中外部样式表：将样式定义在一个外部的CSS文件中（.css）由HTML页面引用样式表文件 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css样式演示</title>
<!-- 2.内部样式：在head元素里style标签里写样式，此样式可以被当前页面上众多元素复用 -->
<style type="text/css">
/*css的注释*/
h2{color:red;}
</style>
<!-- 3.外部样式：在单独的css文件中写的样式，哪个网页引用该文件，这个网页就能复用这些样式 -->
<link rel="stylesheet" href="my.css">
</head>
<body>
<!-- 1.内联样式：在元素的style属性内直接写样式，此样式 无法复用 -->
<h1 style="color: #00bcd4;">CSS</h1>
<h2>CSS有三种样式</h2>
<p>1.内联样式</p>
<p>2.内部样式</p>
<p>3.外部样式</p>
</body>
</html>
四、CSS规则特性继承性：父元素的声明可以被子元素继承，如字体、颜色等。层叠性：同一个元素若存在多个css规则，对于不冲突的声明可以叠加优先级：同一个元素若存在多个css规则，对于冲突的声明以优先级高着为准。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css优先级演示</title>
<style type="text/css">
/*1.继承性：父元素的样式可以被子元素继承（颜色、字体）*/
body{
font-family:"楷体","微软雅黑";
}
/*2.层叠性：给一个元素设置不同的声明，其效果会叠加*/
h1{
color:red;
}
h1{
font-size:50px;
}
/*3.优先级:给同一个元素设置相同的声明，效果以后者为准，即就近原则*/
h2{
color:green;
}
/*.....*/
h2{
color:yellow;
}
</style>
</head>
<body>
<h1>HELLO WORLD!</h1>
<h2>你好，世界！</h2>
</body>
</html>
五、CSS选择器元素选择器：通过元素名来选择css作用的目标 比如<p>、<h1>等类选择器：允许以一种独立于文档元素的方式来指定样式 语法为:.className{}id选择器：选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值*/选择器组：写出一组选择器选中每个选择器所对应目标的并集<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器演示</title>
<style type="text/css">
/*2.类选择器：选择class等于某值的所有元素，class是程序员根据逻辑自己给元素增加的分类*/
.day{
color: blue;
}
/*3.id选择器：选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值*/
#fighting{
color:red;
}
/*4.选择器组：写出一组选择器选中每个选择器所对应目标的并集*/
.day,#fighting{
font-weight: bold;
}
/*5.派生选择器*/
/*5.1选择某元素的子孙*/
#p5 b{
color:red;
}
/*5.2选择某元素的儿子*/
#p5>b{
font-size: 30px;
}
/*6.伪类选择器：根据元素的状态选择选择器*/
/*6.1选择未访问过的超链接*/
a:link{
color:green;
}
/*6.2选择已访问过的超链接*/
a:visited {
color: red;
}
/*6.3选择激活态（正在点）的按钮*/
#i1:active{
background-color: blue;
}
/*6.4选择有焦点的文本框、密码框、文本域*/
#i2:focus {
background-color: green;
}
/*6.5选择鼠标悬停态（触碰）的图片*/
img:hover{
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<p class="day">昨天又是忙碌的一天</p>
<p>今天也是忙碌的一天</p>
<p class="day">后天又是忙碌的一天</p>
<p id="fighting">不管怎么样，生活还得继续呀</p>
<p id="p5">
北京市<u>海淀区<b>200号5号楼</b></u><b>5号房</b>
</p>
<p>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
<a href="http://error.com">错误的网站</a>
</p>
<p>
<input type="button" value="按钮" id="i1">
</p>
<p>
<input type="text" id="i2">
</p>
<p>
<img alt="" src="../images/lcz.jpg">
</p>
</body>
</html>边框：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
/*1.四个边设置相同的边框*/
p{
border:1px dashed red;
}
/*2.单个边设置边框*/
/*left/right/top/bottom*/
h1{
border-left: 10px solid blue;
}
/*3.块元素一般宽度默认是100%，高度为自适应，内容越多，它越高。当给他固定高度时，可能会导致内容溢出，*/
p{
width: 300px;
height: 60px;
/*溢出时的处理*/
overflow:auto;
}
</style>
<body>
<h1>李白</h1>
<p>
李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，
被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，
杜甫与李白又合称“大李杜”。据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，
与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。
</p>
</body>
</html>边距：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
}
/*1.四个边设置相同的边距()*/
#d1{
padding:20px;
margin:30px;
}
/*2.四个边设置不同的边距（上右下左）*/
#d2{
padding:10px 20px 30px 40px;
margin:40px 30px 20px 10px
}
/*3.单个边设置边距
left/right/top/bottom*/
#d3{
padding-left: 20px;
margin-bottom: 40px;
}
/*4.对边设置相同的边距*/
/*先上下 后左右*/
#d4{
padding:20px 40px;
margin:30px 10px;
}
/*5.对边设置边距的特例*/
/*在设置外边距时，若左右外边距值为auto，则该元素水平居中*/
#d5{
margin:20px auto;
}
</style>
</head>
<body>
<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表单元素
用来声明数据提交的范围
只有在此元素内的数据可以提交给服务器 -->
<!-- action属性用来声明数据提交的目标 -->
<form action="http://www.baidu.com">
<!-- 2.表单控件
用来让用户输入数据的
1）input元素（9个 ），它们之间用type元素区分-->
<!-- 文本框
value:设置默认值 maxlength:设置最大长度 readonly:设置只读 -->
<p>
账号:<input type="text" value="lcz" maxlength="10"/>
</p>
<!-- 密码框 属性同上 -->
<p>
密码:<input type="password">
</p>
<!-- 单选框 name:组名。同一组名互相排斥
checked设置默认选中-->
<p>
性别:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</p>
<!-- 多选框 checked:设置默认选中 -->
<p>
兴趣爱好:
<input type="checkbox" checked="checked"/>音乐
<input type="checkbox" checked="checked"/>看书
<input type="checkbox"/>打球
</p>
<!-- 文件框 -->
<p>
头像上传:<input type="file"/>
</p>
<!-- 隐藏框 -->
<p>
<input type="hidden" value="abc"/>
</p>
<!-- 按钮
submit：提交表单中的数据
reset：将表单中的数据重置为初始值
button:没有任何功能，需通过js定义功能 -->
<p>
<!-- 提交按钮 -->
<input type="submit" value="注册">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<input type="button" value="按钮">
</p>
<!--2)其他元素（3个） -->
<!-- label：用来管理表单中的文本 id:是元素的唯一标志，相当于元素的身份证号，任何元素都可以由id，程序员有义务保证元素的id不重复
可以将文本与空间绑定在一起，从而增加了控件的受力面积。-->
<p>
<input type="checkbox" id="xieyi"/>
<label for="xieyi">我已阅读并且自愿遵守此协议！</label>
</p>
<!-- select:下拉选 selected:设置默认选中 -->
<p>
城市:
<select>
<option>请选择</option>
<option selected="selected">北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
</select>
</p>
<!-- textarea:文本域 -->
<p>
简介：<br>
<textarea rows="10" cols="100">这是文本域的默认值</textarea>
</p>
</form>
</body>
</html>
二、CSSCSS指层叠样式表，样式定义如何显示HTML元素，样式通常存储在样式表中。 三、CSS如何使用内联方式：样式定义在单个的HTML元素中内部样式表：样式定义在HTML页的头元素中外部样式表：将样式定义在一个外部的CSS文件中（.css）由HTML页面引用样式表文件 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css样式演示</title>
<!-- 2.内部样式：在head元素里style标签里写样式，此样式可以被当前页面上众多元素复用 -->
<style type="text/css">
/*css的注释*/
h2{color:red;}
</style>
<!-- 3.外部样式：在单独的css文件中写的样式，哪个网页引用该文件，这个网页就能复用这些样式 -->
<link rel="stylesheet" href="my.css">
</head>
<body>
<!-- 1.内联样式：在元素的style属性内直接写样式，此样式 无法复用 -->
<h1 style="color: #00bcd4;">CSS</h1>
<h2>CSS有三种样式</h2>
<p>1.内联样式</p>
<p>2.内部样式</p>
<p>3.外部样式</p>
</body>
</html>
四、CSS规则特性继承性：父元素的声明可以被子元素继承，如字体、颜色等。层叠性：同一个元素若存在多个css规则，对于不冲突的声明可以叠加优先级：同一个元素若存在多个css规则，对于冲突的声明以优先级高着为准。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css优先级演示</title>
<style type="text/css">
/*1.继承性：父元素的样式可以被子元素继承（颜色、字体）*/
body{
font-family:"楷体","微软雅黑";
}
/*2.层叠性：给一个元素设置不同的声明，其效果会叠加*/
h1{
color:red;
}
h1{
font-size:50px;
}
/*3.优先级:给同一个元素设置相同的声明，效果以后者为准，即就近原则*/
h2{
color:green;
}
/*.....*/
h2{
color:yellow;
}
</style>
</head>
<body>
<h1>HELLO WORLD!</h1>
<h2>你好，世界！</h2>
</body>
</html>
五、CSS选择器元素选择器：通过元素名来选择css作用的目标 比如<p>、<h1>等类选择器：允许以一种独立于文档元素的方式来指定样式 语法为:.className{}id选择器：选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值*/选择器组：写出一组选择器选中每个选择器所对应目标的并集<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器演示</title>
<style type="text/css">
/*2.类选择器：选择class等于某值的所有元素，class是程序员根据逻辑自己给元素增加的分类*/
.day{
color: blue;
}
/*3.id选择器：选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值*/
#fighting{
color:red;
}
/*4.选择器组：写出一组选择器选中每个选择器所对应目标的并集*/
.day,#fighting{
font-weight: bold;
}
/*5.派生选择器*/
/*5.1选择某元素的子孙*/
#p5 b{
color:red;
}
/*5.2选择某元素的儿子*/
#p5>b{
font-size: 30px;
}
/*6.伪类选择器：根据元素的状态选择选择器*/
/*6.1选择未访问过的超链接*/
a:link{
color:green;
}
/*6.2选择已访问过的超链接*/
a:visited {
color: red;
}
/*6.3选择激活态（正在点）的按钮*/
#i1:active{
background-color: blue;
}
/*6.4选择有焦点的文本框、密码框、文本域*/
#i2:focus {
background-color: green;
}
/*6.5选择鼠标悬停态（触碰）的图片*/
img:hover{
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<p class="day">昨天又是忙碌的一天</p>
<p>今天也是忙碌的一天</p>
<p class="day">后天又是忙碌的一天</p>
<p id="fighting">不管怎么样，生活还得继续呀</p>
<p id="p5">
北京市<u>海淀区<b>200号5号楼</b></u><b>5号房</b>
</p>
<p>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
<a href="http://error.com">错误的网站</a>
</p>
<p>
<input type="button" value="按钮" id="i1">
</p>
<p>
<input type="text" id="i2">
</p>
<p>
<img alt="" src="../images/lcz.jpg">
</p>
</body>
</html>边框：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
/*1.四个边设置相同的边框*/
p{
border:1px dashed red;
}
/*2.单个边设置边框*/
/*left/right/top/bottom*/
h1{
border-left: 10px solid blue;
}
/*3.块元素一般宽度默认是100%，高度为自适应，内容越多，它越高。当给他固定高度时，可能会导致内容溢出，*/
p{
width: 300px;
height: 60px;
/*溢出时的处理*/
overflow:auto;
}
</style>
<body>
<h1>李白</h1>
<p>
李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，
被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，
杜甫与李白又合称“大李杜”。据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，
与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。
</p>
</body>
</html>边距：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
}
/*1.四个边设置相同的边距()*/
#d1{
padding:20px;
margin:30px;
}
/*2.四个边设置不同的边距（上右下左）*/
#d2{
padding:10px 20px 30px 40px;
margin:40px 30px 20px 10px
}
/*3.单个边设置边距
left/right/top/bottom*/
#d3{
padding-left: 20px;
margin-bottom: 40px;
}
/*4.对边设置相同的边距*/
/*先上下 后左右*/
#d4{
padding:20px 40px;
margin:30px 10px;
}
/*5.对边设置边距的特例*/
/*在设置外边距时，若左右外边距值为auto，则该元素水平居中*/
#d5{
margin:20px auto;
}
</style>
</head>
<body>
<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
- 【JSP Web】02 JSP标准语法
- WEB_02_CSS_第六讲_CSS盒子模型
- 【PHP兴趣部落-02】css + div 简单语法
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
- WEB前端入门-CSS相关知识概述
- 02-JavaWeb-XML-xml语法-DTD语法
- CSS概述，语法,声明，选择器
- [Web基础开发-JSP基础语法]Page指令_02
- Web—CSS概述
- Web_PHP_基础高级语法概述；
- web学习—css样式表—css基础语法
- WEB基础__JavaScript 概述及语法
- JavaWeb——02_CSS
- 【从入门到放弃】WEB前端之HTML+CSS基础02
- Web前端从入门到精通-5 css简介——css概述和选择器
- 02.WEB-HTML之DIV+CSS学习总结
- WEB_BASIC---03 CSS声明
- CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
- 首页网站div制作（div+css概述，css选择器）