千锋逆战班学习日志Day47

千锋逆战班学习第47天

表单标签
CSS介绍
二、CSS和HTML结合
- 2.1CSS和HTML结合之内联结合
- 2.2CSS与HTML结合之内部部结合
- 2.3CSS和HTML结合之外部结合
三、访问路径
四、选择器
- 4.1id选择器
- 4.2类选择器
- 4.3标签选择器/元素选择器
- 4.4选择器分组
- 4.5衍生选择器
- 4.6选择器优先级
五、CSS伪类
六、CSS字体属性
七、CSS文本属性
作业

千锋逆战班学习第47天
努力或许没有收获，但不努力一定没收获，加油。
今天我学习了HTML和CSS。
中国加油！！！武汉加油！！！千锋加油！！！我自己加油！！！

表单标签

概念：表单可以将页面上录入的信息携带到服务器端

<!--文本框:<input> type="text" value:默认值 placeholder:提示密码框:<input> type="password" value:默认值  placeholder:提示单选框:<input> type="radio" checked:默认选中  value:默认值若想使多个单选框互斥，应取一样的name下拉框：<select><option value默认值 selected:默认选中>  </option></select>         selected:默认选中多选框：<input type="checkbox">若想多个多选框归为一类，应取相同的名字上传文件框<input type="file">文本域: <textarea></textarea>提交按钮:<input type="submit"> 重置按钮：<input type="reset">
-->
<form>账户:<input type="text" name="username" placeholder="请输入账户" value="root"/><br />密码:<input type="password" name="password" placeholder="请输入密码"/><br />性别：<input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female"checked="checked"/>女<br />地址：<select name="city"><option value="Wuhan" selected="selected">武汉</option><option value="Xiaogan" >孝感</option></select><br />爱好：<input checked="checked" type="checkbox" name="hobbys" value="basketball"/>篮球 <input checked="checked" type="checkbox" name="hobbys" value="pingpang"/>乒乓球<input checked="checked" type="checkbox" name="hobbys" value="badminton"/>羽毛球<br />照片：<input type="file" name="pic"/><br />介绍：<textarea name="introduce" placeholder="自我介绍，字数为150以内!"></textarea><br /><!--<input type="submit"> ： 将表单中的内容提交到服务器-->    <!--<input type="submit" value="注册"/>--><button type="submit">注册</button><!--   <input type="reset"> : 将表单中的内容重置为原始状态--><!--<input type="reset" value="重置" />--><button type="reset">重置</button>
</form>

CSS介绍

含义
CSS指层叠样式表，cascading(层叠) style(样式) sheets(表格)
作用

通过css可以定义html元素如何显示
html相当于毛胚房，很多效果达不到，css相当于在毛胚基础上做精装修。
优点
通过css可以大大提高工作效率，可使html代码与样式代码分离
书写规范
格式：选择器{属性：属性值；属性：属性值}
- 选择器：确定当前css修饰的是哪一个元素。

二、CSS和HTML结合

2.1CSS和HTML结合之内联结合

2.11实现

    <div><font style="font-size: 600px;color: #008000;">这是一个div</font></div><!--使用font标签来改变文本的字体大小和字体颜色font标签设置字体大小，最大只能设定为7.css内联代码:所有的符号必须是在英文半角模式下！！！在标签中使用style属性,格式如下：style="属性名1: 属性值1;属性名2: 属性值2"颜色取值：颜色英文单词/颜色16进制    -->

2.12优缺点

优点：简单方便
缺点：复用性差，对少数的特定的元素进行单独设置！

2.2CSS与HTML结合之内部部结合

2.21使用方式

内部结合

需要在head标签中，使用style标签
使用选择器选中元素
编写css代码
格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}

2.22实现

<head><meta charset="UTF-8"><title>CSS和html结合之内部结合</title><style>font{font-size: 200px;color: darkgreen;}</style></head><body><div><!--字体大小为:200px,字体颜色:绿色--><font >这是一个font1</font><br /><!--字体大小为:200px,字体颜色:绿色--><font >这是一个font2</font><br /><!--字体大小为:200px,字体颜色:红色--><font style="color: red;">这是一个font3</font><br /></div></body>

2.23优缺点

优点：可以对多个标签进行统一样式设置。
缺点：只能作用于当前页面，复用性不高。

2.3CSS和HTML结合之外部结合

2.31使用方法

外部结合方式
1，新建一个css样式文件
2，编写css代码
3，在html文件中引入css外部文件 ,使用link标签引入

2.32实现

 <head><meta charset="UTF-8"><title>CSS和html结合之外部结合</title><!--以上三种结合方式中，推荐用谁？三种都有用！外部结合方式！！html中的相对路径!!!--><link rel="stylesheet" href="css/css01.css" /></head><body>  <div><!--字体大小为:200px,字体颜色:绿色--><font >这是一个font1</font><br /><!--字体大小为:200px,字体颜色:绿色--><font >这是一个font2</font><br /><!--字体大小为:200px,字体颜色:红色--><font >这是一个font3</font><br /></div></body>

2.33优点

优点：复用性高！简单！

三、访问路径

3.1绝对路径

绝对路径：

不带协议的绝对路径
带协议的绝对路径（如http）

3.2相对路径

相对路径：相对于当前文件所在目录的路径

3.3实现

 <html><head><meta charset="UTF-8"><title>探讨web中的路径1</title><!--访问路径绝对路径：不带协议的绝对路径/带协议的绝对路径相对路径：相对于demo08.html资源去访问css01.css资源  ,  ./:当前目录  ; ../：上一级目录demo08.html的访问路径:http://127.0.0.1:8020/day47/demo08.htmlcss01.css的访问路径:http://127.0.0.1:8020/day47/css/css01.css在demo08.html的同一个目录(day47)下访问css文件夹下的css01.css在demo08.html的   同一个目录(day47)-> css文件夹 -> css01.css./(可以省略)                    css     css01.css               --><link rel="stylesheet" href="css/css01.css" /></head>

四、选择器

格式

     css使用格式：选择器{属性名:属性值;}

4.1id选择器

概念

使用#引入，引用的是id属性值

实现

<html><head><meta charset="UTF-8"><title>选择器</title><!--id选择器：引用的是id属性值#id属性值{属性名:属性值;}--><style>font{font-size: 200px;}#one{color: greenyellow;}#two{color: limegreen;}#three{color: darkgreen;}</style></head><body><!--字体颜色：淡绿--><font id="one">this is font one</font><br /><!--字体颜色：中绿--><font id="two">this is font two</font><br /><!--字体颜色：深绿--><font id="three">this is font three</font><br /></body>

4.2类选择器

概念

使用.引入，引用的是class属性值

实现

<html><head><meta charset="UTF-8"><title>类选择器</title><!--类选择器:引用的是class属性值格式：.class属性值{属性名:属性值;}处理多个元素有相同样式效果的！！！--><style>font{font-size: 200px;}.one{color: greenyellow;}.two{color: limegreen;}.three{color: darkgreen;}</style></head><body><!--字体颜色：淡绿--><font class="one">this is font one</font><br /><font class="one">this is font two</font><br /><!--字体颜色：中绿--><font class="two">this is font three</font><br /><font class="two">this is font one</font><br /><!--字体颜色：深绿--><font class="three">this is font three</font><br /><font class="three">this is font two</font><br /></body>

4.3标签选择器/元素选择器

概念

使用标签名引入，引用的是标签

实现

 <head><meta charset="UTF-8"><title>标签选择器</title><!--标签选择器/元素选择器格式：标签名{属性名:属性值;}将font标签中的文本颜色修改为红色将span标签中的文本颜色修改为蓝色将div标签中的文本颜色修改为绿色所有的文本大小都为300px--><style>body{font-size: 200px;}font{color: red;}span{color: blue;}div{color: green;}</style></head><body><font>this is a font</font><br /><span>this is a span</span><br /><font>this is a font</font><br /><div>this is a div</div><br /><span>this is a span</span><br /><font>this is a font</font><br /><div>this is a div</div><br /></body>

4.4选择器分组

概念

选择器分组：如果多个选择器中的css代码相同，那么就可以将这多个选择器划为一组。

实现

<head><meta charset="UTF-8"><title>选择器分组</title><!--格式：id选择器,class选择,元素选择器{属性名:属性值;}font/span/div中的文本内容字体大小为200px,字体颜色为绿色--><style>#f1,.s1,div{font-size: 200px;color: green;}</style></head><body><font id="f1">this is a font</font><br /><span class="s1">this is a span</span><br /><div>this is a div</div><br /></body>

4.5衍生选择器

概念

衍生选择器/上下文选择器：依据元素所在的位置进行元素的选择

实现

<head><meta charset="UTF-8"><title>衍生选择器</title><!--格式：父选择器 子选择器{属性名:属性值;}父选择器：可以是id选择器、class选择器、元素选择器子选择器：可以是id选择器、class选择器、元素选择器需求：设置span中的font中内容样式。不准用id选择器、内联、class选择器先找到span,再找到font--><style>span font{font-size: 200px;color: deepskyblue;}   </style>  </head><body><span><font>这是一个font</font></span><div><font>这是一个font</font></div></body>

4.6选择器优先级

总结

优先级:内联样式 > id选择器 > 类选择器 > 标签选择器

规律

规律：作用范围越小，优先级越大

实现

<head><meta charset="UTF-8"><title>选择器的优先级</title><style>/*标签选择器*/font{font-size: 50px;color: yellow;}/*类选择器*/.clazz{font-size: 150px;color: orange;}/*id选择器*/#id1{font-size: 250px;color: orangered;}</style></head><body><!--内联样式--><font id="id1" class="clazz" style="font-size: 350px; color: red;">这是一个font</font></body>

五、CSS伪类

实现

<head><meta charset="UTF-8"><title>css伪类</title><!--a:link {color: #FF0000}    /* 未访问的链接 */a:visited {color: #00FF00}  /* 已访问的链接 */a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */--><style>a:link {/* 未访问的链接 */color: cornflowerblue;}a:visited {/* 已访问的链接 */color: red;}a:hover {/* 鼠标移动到链接上 */color: orange;}a:active {/* 选定的链接 */color: green;}font:hover{color: green;font-size: 100px;}button{background-color: orange;}button:hover{background-color: orangered;}</style></head><body><a href="index.html">this i a super link</a><br /><font>this is a font element</font><br /><button>按钮</button><br /></body>

注意事项

a:hover必须被置于a:link 和a:visited之后。
a:active必须被置于a:hover之后。

六、CSS字体属性

概念

设置字体属性是样式表的最常见用途之一。CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。

实现

<<head><meta charset="UTF-8"><title>css中的字体属性</title><!--font-family:微软雅黑、楷体、宋体、仿宋。如果浏览器不支持字体系列，就会使用默认的字体系列(微软雅黑!)，比如：草书font-size:字体大小font-style:字体倾斜度font-weight:字体的粗细--><style>span{font-family: "草书";font-size: 100px;font-style: oblique;font-weight: bolder;}  </style></head><body><span>这是一个span标签</span></body>

七、CSS文本属性

概念

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

实现

<head><meta charset="UTF-8"><title>css文本属性</title><style>   /*css文本属性direction:ltr: left to rightrtl: right to leftline-height:行高text-align:文本的对齐方式text-decoration文本装饰  underline none line-throughletter-spacing字符间距,字符与字符之间的间距word-spacing:单词间距,单词与单词之间的间距              */div{font-size: 50px;color: gray;direction: ltr;text-align: left;text-decoration: none;}a{font-size: 50px;text-decoration: none;}</style></head><body><div>这是一个div</div><a href="index.html">超链接</a></body>

作业

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>作业</title><style>p{text-indent: 2em;}</style></head><body><div style="font-size: 25px; text-align: center;">拒绝4连败!勇士逆转76人回榜首 库里生日夜29分</div><br /><div style="font-size: 10px; text-align: center;">2017-03-15 13:06:05　来源: 网易体育 作者：小柳　有 65277 人参与 手机看赛事 </div><br /><div style="font-size: 20px; text-align: left;"><p>网易体育3月15日报道：</p><p>金州勇士队（53胜14负）在主场反弹。库里得到29分、6个篮板和5次助攻，汤普森得到28分，格林得到20分、8次助攻和6个篮板，他们带领球队逆转16分落后，他们在主场以106-104险胜费城76人队（24胜43负）。勇士队结束3连败，他们重返联盟第一，常规赛2-0横扫76人队。</p></div><div align="center"><img src="img/kuli.png" /></div></body>
</html>