入门到放弃(2)"/>
Web从入门到放弃(2)
这里写目录标题
- 一、嵌套列表
- 二、表格标签
- 三、表格属性
- 四、表单input标签
- 五、表单相关标签
- 六、表格表单组合实列
- 七、div与span
- 八、CSS语法格式
- 九、内联样式与内部样式
- 十、外部样式及两种写法
- 十一、CSS颜色表示法
- 十二、背景样式
- 十三、背景实现视觉差效果
- 十四、边框样式
- 十五·、边框实现三角形
- 十六、family字体类型
- 十七、字体大小粗细样式
- 十八、文本修饰与文本大小写
- 十九、文本缩进与文本对齐
- 二十、文本的行高
- 二十一、文本间距与英文折行
- 二十二、文本与段落实现个人简介
- 二十三、CSS复合样式
- 二十四、ID选择器及注意事项
- 二十五、CLASS选择器及注意事项
一、嵌套列表
1、列表互相嵌套,形成多层级的列表
无序、有序和定义列表均可以采用这种方式书写
<ul><li>辽宁省<ul><li>沈阳</li><li>大连</li><li>丹东</li></ul></li><li>山东省<ul><li>济南</li><li>青岛</li><li>烟台</li></ul></li>
</ul>
二、表格标签
<table>
:表格的最外的容器<tr>
:定义表格行<th>
:定义表头<td>
:定义表格单元<caption>
:定义表格标题
注意:这些标签之间是有对应关系的,要符合嵌套规范- 语义化标签:
<tHead><tBody><tFood>
注意: 1、添加虽然没有什么变化,但符合html语法规范
示例
2、在一个table中,tBody可以出现多次,但tHead、tFood只能出现一次
<table><caption>天气预报</caption><tr><th>日期</th><th>天气情况</th><th>出行情况</th></tr><tr><td>2022年10月26日</td><td>小雨</td><td>阴雨连绵,出门带伞</td></tr><tr><td>2022年10月27日</td><td>晴朗</td><td>天气晴朗,适合出行</td></tr></table>
三、表格属性
<border>
:表格边框<cellpadding>
:单元格内的空间<cellspacing>
:单元格之间的空间
以上在<table>
中设定<rowspan>
:合并行<colspan>
:合并列
以上在<th>
和<td>
中均可设定<align>
:左右对齐的方式
(left/center/right)<valign>
:上下对齐的方式
(top/middle/bottom)
以上在<tHead>
中设定
<table border="1"cellpadding="30"cellspacing="30"><caption>天气预报</caption><tHead align="right"valign="top"><tr><th colspan="2">日期</th><th>天气情况</th><th>出行情况</th></tr></tHead><tBody><tr><td rowspan="2">2022年10月26日</td><td>白天</td><td>小雨</td><td>阴雨连绵,出门带伞</td></tr><tr><td>夜晚</td><td>小雨</td><td>阴雨连绵,出门带伞</td></tr><tr><td rowspan="2">2022年10月27日</td><td>白天</td><td>晴朗</td><td>天气晴朗,适合出行</td></tr><tr><td>夜晚</td><td>晴朗</td><td>天气晴朗,适合出行</td></tr></tBody><tFood></tFood></table>
四、表单input标签
<form>
:表单最外层容器<input>
:标签用于搜集用户信息,根据不同的type属性,展示不同的控件,如输入框、密码框、复选框等
如下图
五、表单相关标签
<textarea>
:多行文本框<select>
、<option>
:下拉菜单<lable>
:辅助表单
六、表格表单组合实列
七、div与span
-
<div>
(块)
div全称为division,“分割、分区”的意思,<div>
标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>
标签中,<div>
标签也可以嵌套多层<div>
,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。 -
<span>
(内联)
用来修饰文字,<div>
与<span>
都是没有任何默认样式的,需要配合CSS才行。
八、CSS语法格式
- 格式:选择器:(属性1:值1;属性2:值2)
- 单位:px->像素(pixel)、%->百分比
- 基本样式:width、height、background-color
- CSS注释:/CSS注释内容/
九、内联样式与内部样式
- 内联(行内、行间)样式
在html标签上添加style属性来实现的 - 内部样式
在<style>
标签内添加的样式
注意:内部样式的优点,可以复用代码
十、外部样式及两种写法
- @import语法
<link>
标签
real、href
十一、CSS颜色表示法
- 单词表示法
red、yellow、blue、green等 - 十六进制表示法
- RGB三原色表示法
rgb(255,255,255);取值范围0~255
单词表示法适配的范围较小,后两种色域更宽
十二、背景样式
background-color
:背景颜色background-image
:背景图片/
url
(背景地址)
默认:会水平垂直都铺满背景图background-repeat
:背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat(x,y都进行平铺)
no-repeat 都不平铺background-position
:背景图片的位置
若x、y为正数,会向右和向下迁移;
若x、y为负数,会向左和向上迁移。
x y:number|单词
x:left、center、right
y:top、center、bottombackgrounnd-attachment
:背景图随滚动条的移动方式
scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed(背景位置是按照浏览器进行偏移的)
十三、背景实现视觉差效果
十四、边框样式
border-style
:边框的样式
solid:实线
dashed:虚线
dotted:点线border-width
:边框地大小
px····border-color
:边框的颜色
red #100····
注意:针对某一边进行单独设定
边框也可以针对某一边进行单独设置:border-left-style:中间是方向 left、right、top、bottom
十五·、边框实现三角形
颜色:透明颜色 transparent
十六、family字体类型
- font-family:字体类型
英文字体:Arial、‘Times New Roman’
中文字体:微软雅黑(‘Microsoft YaHei)、宋体(SimSun) - 衬线体与非衬线体
注意事项:
1、设置多字体的目的:字体类型能够识别更多的计算机
2、引号的问题
十七、字体大小粗细样式
-
font-size
:字体大小
默认:16px
写法:number(px)|单词(small large····不推荐使用)
注:字体大小一般为偶数,用单词法渲染出来的不一定为偶数 -
font-weigt
:字体粗细
模式:正常(normal)加粗(bold)
写法:单词(normal、blod)|number(100 200 300···900;100到500都是正常的,600到900都是加粗的) -
font-style
:字体样式
模式:正常(normal)斜体(italic)
写法:单词(normal、italic)
注:oblique也表示斜体,用的比较少,了解即可
区别
1、italic所有带有倾斜属性的字体才可以设置
2、oblique没有倾斜属性的字体也可以设置倾斜操作 -
color
:颜色
十八、文本修饰与文本大小写
text-decoration
:文本装饰
下划线:underline
删除线:line-through
上划线:overline
不添加任何装饰:none
注: 对一文本同时添加多种修饰时中间用空格隔开,不能用逗号text-transform
:文本大小写(针对英文)
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
十九、文本缩进与文本对齐
text-indent
:文本缩进
首行缩进
***em
单位:相对单位,1em
***永远都是和字体大小相同text-align
:文本对齐方式
对齐方式:left、right、center、justify(两端点对齐)
二十、文本的行高
line-height
:定义行高
行高:一行文字的高度,上边距和下边距的等价关系。
默认行高不是固定值,根据当前字体大小,不断变化。
取值:
1、number(px)
2、scale(比例值,跟文字大小)
二十一、文本间距与英文折行
letter-spacing
:定义字间距word-spacing
:定义词间距(针对英文)- 强制折行:(针对英文)
1、word-break:break-all;(非常强烈的折行)
2、word-wrap:break-word(不是那么强烈的折行,会产生一些空白区域)
二十二、文本与段落实现个人简介
二十三、CSS复合样式
一个CSS属性只控制一种样式,叫做单一样式。
一个CSS属性控制多种样式,叫做复合样式。
复合的写法是通过空格的方式实现的,有的是不需要关心顺序的,如background和border;有的需要关系顺序,如font
- 1、background:red url() repeat 0 0;
- 2、border:1px red solid:
- font(color不属于font系列)
注:最少需要有两个值size family
weight style size family
正确
style weight size family
正确
weight style size family/line-height family
正确
注意:尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式。
二十四、ID选择器及注意事项
- ID选择器
CSS:#elem{}
html:id="elem"
注意:
1、在一个页面中,ID值是唯一的。
2、命名规范,字母 -数字(命名的第一位不能是数字)
3、命名方式
驼峰式:searchButton
(小驼峰)、SearchButton
(大驼峰)、searchSmallButton
下滑线式:search-small-button
短线式:search_small_button
二十五、CLASS选择器及注意事项
- CLASS选择器
CSS:elem{}
html:class="elem"
注意
1、class选择器是可以复用的。
2、可以添加多个class样式。
3、多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。
4、标签+类的写法
更多推荐
Web从入门到放弃(2)
发布评论