标签：color day01 html 样式 选择符 字体 font 选择器 css
一，html
-
html语法
2.标题字体
3.物理字体
3.字符实体
4，列表
- 无序列表
- 有序列表
- 自定义列表
5超链接和图像
- 超链接
a标签里设置title时：
<!--
a 标签是超链接
href 所要链接的地址
target 设置页面打开方式
_blank 在一个新的窗口打开页面
_self 在当前窗口打开页面
-->
<a href="http://www.baidu.com" target="_self">点击前往百度</a>
<!--
跳转到其他页面
-->
<a href="../day03/test.html" title="点击跳转到day03">点击</a>
<!-- 点击下载文件-->
<a href="test_01.zip">点击下载</a>
<!-- 点击发送邮件-->
<a href="mailto:1525676@163.com">邮箱</a>
<!--
绝对路径：从盘符开始，一级一级目录找到目标文件
相对路径：从当前位置出发，找到目标文件
-->
<img src="img/img02.jpg" alt="图片去火星了" title="图片">
- 图像
6表格
表格的基本格式
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
*表格的相关属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
7表单
1、表单框
<form name="表单名称" method="post/get" action="url">
</form>
2、表单控件
<input type="" />
控件的具体细节
1）文本框
<input type="text" value="默认值"/>
2)密码框
<input type="password" />
3)提交按钮
<input type="submit" value="按钮内容" />
4)重置按钮
<input type="reset" value="按钮内容" />
5)空按钮
<input type="button" value="按钮内容" />
5）单选按钮组
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked="checked" />(默认选中)女
6）复选框
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)
(checked="checked" :默认选中)
7)按钮
<input name="" type="button"
value="按钮内容" />
（他和submit的区别是 ，submit是提交按钮 起到提交信息的作用，button只起到跳转的作用，不进行提交。）
8表单域
<select name="" >
<option>下拉选项1</option>
<option>下拉选项2</option>
…………
</select>
表单域多行文本
格式：<textarea name="" cols="" rows="" >
</textarea>
说明
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
常用元素
- div和span标签
表单的补充
1.action：表单提交地址 2.method： get和post get 显示url（地址） post：不显示地址 3.form子标签加name才能提交 4.提交的是value的值 5.对于radio和cheeckbox而言 没有设置name的话提交on上的值 6.select提交的是option的value的值，如果没有设值提交option中间的文本 7textarea提交的是标签中间文本值 8.<input type="submit/reset/botton“ value=”“>xxxx</input> value表示按钮的值 <botton type="submit/reset/botton">xxxx<botton>xxxx是按钮上的文字 9.<label for=”woman“></label><input id="woman" type="radio"></input> 对男女包装
二css
1、内部样式表（嵌套到页面中）
语法：
<style type="text/css">
css语句
</style>
注：使用style标记创建样式时，最好将该标记写在<head></head>;
2、内联样式（行间样式，行内样式，嵌入式样式）
语法：
<div style="属性1:值1;属性2:值2;属性3:值3;……">
</div>
3、引用外部样式表文件
(1) 语法：
<link href="目标文件的路径及文件名全称"
rel="stylesheet" type="text/css" />
说明：使用link元素导入外部样式表时，需将该元素写在文 档头部，即<head>与</head>之间。
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；
css选择器
1.类型选择符（标记选择器）
2.类选择符 （class选择符）
3.ID选择符 （id选择器）
4.伪类选择器
5.群组选择符（集合选择器）
6.通配符（*）
7.包含选择符（后代选择器）
4==伪类的细节
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
}
div:hover{
background-color: blue;
}
div:active{
background-color: yellow;
}
/*
伪类选择符
设置标签的几种状态
1，link 正常状态
2，visited 访问过后的状态
3，hover 光标悬浮的状态
4，active 点击没放手的状态
只有a标签可以全部设置这4种状态
设置的顺序必须按照该顺序来，否则也可能不起作用
马老师独家记忆法
love hate 爱恨交织
*/
a:link{
color: red;
}
a:visited{
color: yellow;
}
a:hover{
color: green;
font-size: 40px;
}
a:active{
color: black;
font-size: 20px;
}
</style>
5.群组选择符的详细
<title>群组选择符</title>
<style type="text/css">
/*
当多个选择符具有相同的样式的时候
可以声明一个群组选择符
将这些相同的样式写在群组选择符后面
在给每个选择符书写不同的样式即可
*/
.d1 , .d2 , .d3{
width: 100px;
height: 100px;
}
.d1{
background-color: red;
}
.d2{
background-color: blue;
}
.d3{
background-color: yellow;
}
/*
通配符
页面上所有的标签都具有的样式用通配符来表示
*{
border: 1px solid red;
}
*/
/*
包含选择符
指定一个范围内的所有的某一种标签都具有该样式
*/
.d3 p{
color: red;
}
</style>
</head>
<body>
<div class="d1">
</div>
<div class="d3">
<p>123</p>
<p>123</p>
</div>
<div class="d3">
<p>123</p>
<p>123</p>
</div>
<p>123</p>
</body>
</html>
权重问题：包含选择器权重可以相加
权重占比：行间1000 id100 class10 标签1
css的核心属性（如字体的样式 文本的设置等）
- 字体属性
font-family: "宋体";
- 字体大小
font-size: 30px;
- 字体颜色
color: red;
- 字体加粗
/* 字体加粗 100~500常规字体 600~900粗体 */ /*font-weight: 600;*/ - 字体斜体
font-style: italic;
- 字体的复合写法
font：style variant weight size family； 总体设置字体，按以上顺序;size和family不可和其他属性位置互换； font: italic 100 30px "宋体"; color: red;
标签：color,day01,html,样式,选择符,字体,font,选择器,css 来源： https://www.cnblogs.com/hsh5201314/p/11509296.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。