HTML5与CSS3网页设计

<!doctype html>
<html>
<head>//头部
<title>标题</title>
</head>
<body>主体内容……</body>
</html>

<head>……<head/>(头部)<title>……<title>(标题)<body>……</body>(身体)

<h#>标题内容</h#> (#：1~6) <p>字段内容</p> (用于分段) <br>（换行作用） <hr>（水平线）  （空格）&copy（©）

color（颜色）size（厚度）bgColor（背景颜色）background（背景图片）marquee（滑动字幕）

（网页中注释符的写法）

示例：

<!doctype>
<html>
<head><title>示例</title></head>
<body bgcolor="#bbffff">
<h1 align="center">大主宰</h1>
<hr size="5px" width="70%" color="bule">
<br>
<h2>第一章</h2>
<p>这里是第一章……</p>
<h2>第二章</h2>
<p>这里是第二章……</p>
</body>
</html>

<ul><li>……</li></ul>（无序列表）<ol><li>……</li></ol>（有序列表）<a href="链接地址">……</a> (导航链接)

片段（把代码复制到body中查看效果）
<nav>
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
</nav>

片段（把代码复制到body中查看效果）

<u>……</u>（下划线）<i>……</i>（倾斜）<b>……</b>（加粗） border（边框宽度）width（表格宽度）eight（表格高度）

<table>……</table>（表格）<caption>……</caption>（表格的标题）<th>……</th>（列头单元格）<tr>……</tr>（行）<td>……</td>（列）

<img src="图片文件地址" alt="图片">（alt:图片说明） <audio src="音频文件地址" controls="controls">您的游览器不支持aduio标签</audio>

<video src="视频文件地址" width+"宽" eight="高" controls="controls">您的游览器不支持video标签</video>

（宽、高，替换成数字，controls属性是暂停播放的属性控件）

片段（把代码复制到body中查看效果）

多行文本代码片段　　　　　　　　　　　　　　　　　　　　　　　　　　　　按钮代码片段

<textarea rows="3" cols="20">……</textarea>（多行文本,3、20参数，根据需求填） <button type="button">点我啊！</button>（按钮）

<select><option value="姓名">陈扬胜</option></select>（创建菜单和选项）

片段（把代码复制到body中查看效果）

<select>
<optgroup label="组长"><option value="组长">张健文</option></optgroup>
<optgroup label="组员"><option value="组员">陈扬胜</option><option value="组员">肖商富</option><option value="组员">李木炜</option></optgroup>
</select>

<form><!--简单表单代码片段-->
<label for="txtName">姓名：</label><input type="text" id="txtName"/>
</form>

<form><!--组合表单代码片段-->
<fieldset><legend>个人信息</legend>姓名：<input type="text" id="txtName"/></fieldset>
</form>

选择器属性值属性值
css基础语法： h1{color:red;font-size:14px;}

<标记名 style="样式规则的集合">网页内容</标记名>

行内样式的定义及应用：

<p style="color:bule;font-size:10pt">css实例</p>

写在<head>里样式集合（内容由自己定义）

嵌入样式的定义及应用：

<head><style type="text/css">p{color:blue;font-size:20pt;}</style>……</head>

外部样式的应用：

<head><style type="text/css">@import"*.css";</style></head>

（*填样式文件的名字）

外部样式示例：

<!doctype html>
<html>
<head>
<style type="text/css">@import"ys.css"；</style>
<title>外部样式示例</title>
</head>
<body>CSS样式的应用</body></html>

css样式文件的内部结构：

p
{
text-decoration:blink;<!--文本闪烁-->
text-decoration:none;<!--文本去掉下划线-->
text-decoration:underline;<!--文本加下划线-->
text-decoration:overline;<!文本顶端画下划线>
text-decoration:line-through;<!--文本中间加个贯穿线-->
text-indent:5em;<!--文本缩进-->
background-position:top;<!--图形位置-->
word-wrap:break-word;<!--自动换行-->
font-family:serif;<!--字体样式-->
font-style:italic;<!--字体风格-->
font-size:30pt;<!--字体大小-->
font-weight:900;<!--字体加粗-->
}

body
{
background-image:url(img\1.jpg),url(img\2.png);;<!--多重背景图片-->
}

链接样式属性：

a:link{color:#FF0000;}/*！未被访问时链接的效果*/
a:visited{color:#00FF00;}/*已被访问的链接效果*/
a:hover{color:#FF00FF;}/*！鼠标指针移动到链接上时的效果*/
a:active{color:#0000FF;}/*正在被点击时的链接效果*/
a:link{decoration:none;}/*去掉链接中的下划线*/
<!--当为链接的不同状态设置样式时，请按照以上的次序来写-->

鼠标在字体上滑动停留效果

<marquee onMouseOver="this.stop()" onMouseOut="this.start()"></marquee>

设置链接的背景色

a:link{background-color:#0066FF;}<!--在样式中写-->

设置列表项标志形状

ul{list-style-type:square;}<!--写在样式中-->

设置列表项图像

ul li{list-style-image:url(图像位置)}

表格的宽度和高度

table{width:100% eight:50px;}<!--两种写法都可以-->

表格文本对齐方式

td{text-align:center;}

表格内边距

td{padding:15px;}

设置链接字体变大效果

a:link{font-size:10px;}
a:hover{font-size:15px;}<!--写在样式里-->

折叠边框

table{border-collapse:collapse;}

组选择器

body,h2,p,table,th,td,pre,strong,em{color:gray;}<!--如果你想把多个元素显示为灰色，可以组合选择器，统一写规则-->

包含（后代）选择器

table tr td p{font-size:9pt}

子元素选择器

<!--如果你希望选择只作为h1元素子元素strong元素，可以这样写，这样写的范围缩小了，而且更准确-->

h1>strong{color:red;}

后代选择器和子选择器

table td >p

类选择器

相邻兄弟选择器

<style>
　　　　p+span{
　　　　　　border:1px solid red;
　　　　　　background:yelllow;
　　　　}
　　</style>


　　<div>
　　　　<p>
　　　　　　我是p
　　　　</p>
　　　　<span>我是相邻p标签的span</span>
　　　　<span>我不是相邻的span</span>
　　</div>

作用范围：选择相邻的两个元素元素一定要有同一个父级，+后面的元素享受样式。
比如上面只有：我是相邻p标签的span享受样式

　1、什么是选择器？

　　2、选择器分文哪三种？

　　3、什么是标签选择器？

　　4、标签选择器可派生出哪4中选择器？

　　5、类和ID选择器分别要用到哪两个符号？

　　选择符的分类

　　　　属性选择符

　　　　　　h1{属性：值；}

　　　　组选择符

　　　　　　h1,h2,h3{属性：值；}

　　　　包含选择符

　　　　　　p h1{属性：值；}

　　　　class类选择符

　　　　　　.div{属性：值；}

　　　　ID选择符

　　　　　　#div{属性：值；}

　　　　伪类选择符

　　　　　　#div:pseudo-class{属性：值；}

　　　　　　a:link{属性：值;}

　　　　　　a:visited{属性：值;}

　　　　　　a:hover{属性：值；}

　　　　　　a:active{属性：值；}

　　　　　　p:first-letter{属性：值}--首字的伪类样式

　　　　　　p:first-line{属性：值}--首行的伪类样式

　　　　通配选择符

　　　　　　*{属性：值；}

边框样式（写在样式文件，或内嵌行内样式中）

{border-style:solid;}<!--实线边框-->
{border-style:dotted;}<!--点线边框-->
{border-style:dashed;}<!--虚线边框-->
{border-style:double;}<!--双线边框-->

posted @ 2018-04-17 11:17 陈爸比阅读(513) 评论(0) 编辑收藏举报

刷新页面返回顶部

HTML5与CSS3网页设计

示例：

公告