HTML和CSS相关问题

阅读: 评论:0

HTML和CSS相关问题

HTML和CSS相关问题

1.行内元素、块级元素是什么?有哪些?

行内元素:
      作用:在结构中填充网页内容
      特点:与其他行内元素共享一行空间
            宽高都有自己决定
            不用来搭建网页结构、也无需通过CSS指定宽高
            不可以嵌套块级元素
      span                      无意义的行内元素                         CSS去修饰
      a超链接            href="url(绝对路径)/相对路径/#(锚点)"    
                        target="_self(当前页面)/_blank(新页面)"
      img图片            width,height,src(绝对路径、相对路径),
                        alt图片找不到后展示的文字信息
      装饰类型(淘汰)     
      strong,b,em,
      i,sup,sub

块级元素:
      作用:搭建网页结构
      特点:独占一行内容、宽度默认100%、高度由自身或子元素内容决定、
      可以通过CSS指定高度宽度、块级元素不要嵌套到行内元素中
      div                       无意义的块级元素                        
      h1~h6                     标题                               margin,font-size,font-weight 
      p                         段落                               margin
      ul>li                     无序列表                           margin,padding,list-style
      ol>li                     有序列表                           margin,padding,list-style
      dl dt dd                  自定义列表                         margin
      html/head/body                                              body:margin
      header/footer/nav/        h5的语义化标签
      article/aside/section/   (样式与div类似)
      address/details           检索的时候有意义(SEO、爬虫)

2.网页的三层结构(三要素)有哪些?

HTML   结构
CSS    表现
JS     行为

3.HTML5与HTML4的异同点

1)结构
<!DOCTYPE html>
<meta charset="UTF-8">
字符集统一:防止乱码(数据库,html,css,js,编辑器vscode,客户端浏览器)

2)兼容性不同
HTML4兼容性更高
HTML5功能更丰富(webapp开发,网页,微信链接与公众号,android与ios的app,cordova)

3)HTML中增加很多新特性———H5API
语义化标签、input type、画布、canvas、本地存储、缓存、定位

CSS的文本的字体样式

  font-size 为文字指定大小
  font-family 为文字指定特殊的字体,浏览器只会使用浏览器可以访问到的字体
  font-style 用于打开和关闭斜体文本
  font-weight 为字体设置粗细程度
  text-align 文字排列方式
  text-decoration 设置或者取消文本修饰
  text-transform 设置或者取消字体改变
  text-shadow 设置或者取消文本阴影

2.font-family
为文字指定特殊的字体,浏览器只会使用浏览器可以访问到的字体。
取值:通用字体
• serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
• sans-serif 无衬线的字体,笔画结尾是平滑的字体
• monospace 等宽字体,用于代码,字体中每个字宽度相同
• cursive 草书,这种字体有的有连笔,有的还有特殊的斜体效果。
• fantasy 梦幻装饰字体 ,具有特殊艺术效果的字

字体栈
由于我们不能保证我们的字体有效,可以一次性指定多个字体,如果第一个字体
无效则使用下一个字体,以此类推。一般将字体栈中最后一个字体设置为通用字体。

WebFont
当用户电脑中没有安装对应字体的时候,webFont可以加载网络字体进行显示。

字体图标
在开发网站的时候需要各种各样的小图标,这些图标如果要求美工绘制可能比较麻
烦,那么我们可以直接使用开源的字体图标库,这些字体图标库使用webFont原理,
我们加载一个图标就好像加载一个字体一样简单,通过控制字体大小,字体颜色来
控制图标的大小与颜色。

3.font-style
用于打开和关闭斜体文本
取值:normal 【默认】正常字体,关闭斜体
      italic 斜体
      oblique 模拟斜体

4.font-weight
为字体设置粗细程度
取值:
normal 【默认】正常,400
bold 加粗字体,700
lighter 设置当前元素字体比父元素更细
bolder 设置当前元素字体比父元素更粗
100–900 数值类型的粗细程度(值越大字体越粗)

<-align 文字排列方式
left 左对齐
center 居中
right 右对齐

text-transform 允许字体改变,文本变形
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体

text-decoration:设置或者取消文本修饰,速写属性 line style color

text-decoration-line线的种类
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线

text-decoration-style 线的样式
solid(实线) 、wavy(波浪线)、dashed(虚线)、dotted(点状线)、double(双实线)
Text-decoration-color 颜色

6.字体阴影text-shadow
设置或者取消文本阴影
语法:
text-shadow: h-shadow v-shadow blur color;
取值:
none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。

列表样式
1.list-style-type
设置列表项标志类型
取值:
none          No item marker is shown. 
disc          A filled circle (default value)
circle        A hollow circle
square        A filled square
decimal       Decimal numbers,Beginning with 1
lower-roman   Lowercase roman numerals&# i, ii, iii, iv, v…
upper-roman   Uppercase roman numerals&# I, II, III, IV, V…
decimal-leading-zero : Decimal numbers,Padded by initial zeros&# 01, 02, 03,

2.list-style-position
设置列表项标志出现的位置
outside 【默认】列表项标志出现在主块框的外部
inside 列表项标志出现在主块框的内部

3.list-style-image
自定义设置列表项标志
url() 指定图标路径

4.list-style
列表样式的速记写法
[<type>][<image>][<position>]

cursor 调整光标悬浮到链接上的时候光标的形状
url        需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,
           以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help
default    默认光标(通常是一个箭头)
auto       默认。浏览器设置的光标
pointer    手型
crosshair  十字交叉
wait       等待
help       帮助
move       移动
text       文本
 
line-height 设置文本的行高
取值为绝对单位或者相对单位

outline 调整环绕链接的框,速写属性
类似border,但是不占据屏幕空间
outline-width 边框线的宽度
outline-style 边框线的样式
outline-color 边框线的颜色
outline-offset 边框线的偏 

display  显示方式
inline   行内显示,宽高无效
block    块级显示,宽高有效
inline-block 行内显示同时宽高有效
none     不显示,不占据屏幕空间

visibility  显示与隐藏
hidden      隐藏,占据屏幕空间
visible     显示

opacity   透明度,0-1之间的取值,取值为0的时候隐藏,占据屏幕空间

overflow  溢出处理
hidden    超出内容隐藏
auto      超出产生滚动条
scroll    滚动条

仓库:git svn  集中式,分布式
第三方托管平台:gitee 中国码云
                           github 国外托管平台
                           gitlab 私人托管

本文发布于:2024-01-31 14:30:47,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170668265029200.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:HTML   CSS
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23