首页 前端知识 Web前端开发 - 2 - CSS3基础

Web前端开发 - 2 - CSS3基础

2024-05-30 10:05:25 前端知识 前端哥 787 239 我要收藏

CSS3基础

    • 一、 CSS3基础及选择器
      • 1. CSS基本用法
      • 2. CSS特性
      • 3. CSS3选择器
        • 1. 选择器分类
        • 2. 伪类选择器
    • 二、网页文本
      • 1. 网页文本标签
      • 2. 字体样式
      • 3. 文本样式
    • 三、 美化图像
      • 1. 图像样式
      • 2. 背景图像
    • 四、 美化超链接
    • 五、 美化列表
      • 1. 列表
      • 2. 样式
      • 3. 设计多级菜单
    • 六、 美化表格
      • 1. 表格
      • 2. 表格属性
      • 3. 表格样式
    • 七、 美化表单
      • 1. 表单
      • 2. 表单元素、属性、值

一、 CSS3基础及选择器

1. CSS基本用法

DIV+CSS基础

2. CSS特性

  • 层叠性
  • 标签选择器:优先级加权值为1;
  • 伪元素或伪对象选择器:10
  • 类选择器:10
  • 属性选择器:10
  • ID选择器:100
  • 其他选择器:0,如通配选择器等
  • 继承性

3. CSS3选择器

1. 选择器分类
大类分类
基本选择器标签选择器、类选择器class(.)、 ID选择器id(#)、通配选择器(*)
组合选择器包含选择器( )、子选择器(>)、相邻选择器(+)、兄弟选择器(~)、分组选择器(,)
伪类选择器
伪元素
属性选择器E[attr]、E[attr=“value”] 、E[attr~=“value”] (具有) 、E[attr^=“value”] (开头)、E[attr$=“value”] (结尾)、E[attr*=“value”] (包含)、E[attr|=“value”] (value或value-开头)
2. 伪类选择器
/* 伪类选择器分为6种  */
动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器
  1. 动态伪类
/*   行为类样式,并不存在于HTML中,只有当用户与页面进行交互时才能体现出来
锚点伪类,这是一种在链接中常见的样式,如 :link、:visited
行为伪类,也称为用户操作伪类,如 :hover、:active、:focus
*/
  1. 结构伪类
/* 利用文档结构树实现元素过滤,通过文档结构的相互关系来匹配特定的元素,从而减少文档内class属性和ID属性的定义
:fist-child		选择某个元素的第一个子元素
:last-child		选择某个元素的最后一个子元素
:nth-child()	选择某个元素的一个或多个特定的子元素
:nth-last-child()	选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始计算
:nth-of-type()		选择指定的元素
:nth-last-of-type()	选择指定的元素,从元素的最后一个开始计算
:first-of-type		选择一个上级元素下的第一个同类子元素
:last-of-type		选择一个上级元素下的最后一个同类子元素
:only-child		选择的元素是它的父元素的唯一一个相同类型的子元素
:only-of-type	选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty			选择的元素里面没有任何内容
*/
  1. 否定伪类
/*
 :not() 否定选择器,即排除或者过滤掉特定元素。
 input:not([type="submit"]){border:1px solid red;} 
 */
  1. 状态伪类
/* 状态伪类主要针对表单进行设计的
UI元素的状态一般包括:可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等
CSS3定义了3种常用的UI状态伪类选择器
1. :enabled	匹配指定范围内所有可用UI元素(UI元素一般是指包含在form元素内的表单元素)
2. :disabled	匹配指定范围内所有不可用元素【disabled、enale】
3. :checked 	匹配指定范围内所有可用UI元素【checked、unchecked】
*/
  1. 目标伪类
/*	
目标伪类选择器形式如E:target,它表示选择匹配E的所有元素,且匹配元素被相关URL指向,该选择器是动态选择器,只有当存在URL指向该匹配元素时,样式效果才能够有效
*/

在这里插入图片描述
在这里插入图片描述

二、网页文本

1. 网页文本标签

在这里插入图片描述
HTML5新增文本标签
在这里插入图片描述

2. 字体样式

/*
字体font : font-style || font-variant || font-weight || font-size || line-height || font-family
字体类型font-family : cursive草体 | fantasy奇异字体 | monospace等宽字体 | serif衬线字体 | sans-serif无衬线字体
下划线text-decoration : none | underline | blink | overline  line-through
大小写text-transform : none | capitalize | uppercase | lowercase
*/

3. 文本样式

/*
文本对齐text-align : left | right | center | justify
垂直对齐vertical-align : auto | baseline |sub |supper | top | text-top | middle | bottom | text-bottom | length
字距 letter-spacing
词距 word-spacing
行高 line-height : normal | length
缩进 text-indent : length
阴影 text-shadow : 水平偏移值length 垂直偏移值length 模糊值length 颜色color
溢出 text-overflow : clip | ellipsis | ellipsis-word
(强制文本在一行内显示white-space:nowrap ; 溢出内容为隐藏overflow:hidden)
换行 line-break || word-wrap : normal | break-word || word-break : keep-all || white-space : nowrap | pre
动态内容 content : normal | string | attr() | uri() | counter() | none
恢复默认样式 元素样式 : initial
自定义字体类型 @font-face { <font-description> }

*/

三、 美化图像

1. 图像样式

/* <img src="URL" alt="替代文本" />  HTML5为<img>标签定义了多个可选属性:
height: 图像高度,单位是像素或百分比
width: 图像宽度
ismap: 将图像定义为服务器端图像映射
usemap: 将图像定义为客户端图像映射
longdesc: 指向包含长的图像描述文档的URL

定义图像边框border-style : dotted点线 | dashed虚线 | solid | double  | groove | ridge | inset | outset 
边框颜色border-color
边框宽度border-width
图像不透明度opacity
圆角图像border-radius : none | length
阴影图像box-shadow : none | inset内阴影 | length水平偏移、垂直偏移、大小模糊度、扩展 | color
*/

2. 背景图像

/* background属性派生了8个子属性
定义背景图像background-image : none | <url>
背景颜色background-color : 
指定背景的显示区域background-origin : border-box | padding-box | content-box
指定背景的裁剪区域background-clip : border-box | padding-box | content-box | text
设置背景图像是否以及如何重复铺排background-repeat : repeat-x|repeat-y|repeat|space|round|no-repeat
定义背景图片的大小background-size : 
设置背景图像位置background-position : 
定义背景图像的显示方式background-attachment : fixed相对浏览器窗体固定 | scroll相对元素固定 | local相对元素内容固定

渐变背景background-image:线性渐变<linear-gradient>|径向(放射性)渐变<radial-gradient>|<repeating-linear-gradient>|<repeating-radial-gradient>
- x:left/center/right ; y:top/center/bottom

定义循环方式background-break : bounding-box | each-box | continuou 【Firefox浏览器,-moz-background-inline-policy私有属性

*/

渐变背景
设计纹理
页面背景
拓展:动态边框
拓展:设计图标按钮

四、 美化超链接

/* <a>标签用于定义超链接,a标签属性
规定被下载的超链接目标download : filename
规定链接指向的页面的URL href : URL
规定被链接文档的语言 hreflang : language_code
规定被链接文档是为何种媒介/设备优化的 media : media_query
规定当前文档与被链接文档之间的关系 rel : text
规定在何处打开链接文档 target : _blank | _parent | _self | _top | farmename
规定被链接文档的MIME类型 type : MIME type

创建锚点链接:定义ID值 - #

定义热点区域:<map> <area>配合使用
浮动框架iframe
超链接伪类 : :link | :visited | :hover | :active | :focus
定义鼠标样式cursor : auto | crosshair | default | pointer | move | e-resize/ne-resize…… |text | wait | help | <uri>URL 
*/

五、 美化列表

1. 列表

/*
无序列表 : ul-li
有序列表 : ol-li
定义列表 : dl-dt+dd
菜单列表 : menu-command/menuitem [p235-244]
*/

2. 样式

/*CSS专用列表属性
list-style : 复合属性,设置列表项目相关内容
list-style-image : 设置列表项目的符号图像,自定义项目符号
list-style-position : 设置列表项目符号的显示位置,根据文本在内或在外排列,取值包括outside|inside
list-style-type : 设置列表项目符号的类型
*/

list-style-type属性

3. 设计多级菜单

【p256】

六、 美化表格

1. 表格

/* 标准化的表格结构
表格 : table
表格标题 : caption
表格行 : tr
表头单元格 : th
单元格 : td
表头 : thead
表格主体 :tbody
表格页脚 : tfoot
一个或多个列的属性值 : col
列分组 : colgroup-span
*/

2. 表格属性

/* HTML5支持的table标签属性
边框
单元格补白 : Cellpadding
单元格边界 : cellspacing
数据表宽度 : width
外边框线显示 : frame
内边线显示 : rules
摘要 : summary

HTML5支持的td和th标签属性
单元格中的缩写 : abbr
水平对齐方式 : align
分类 : axis
定义根据哪个字符进行内容对齐 : char
对齐字符的偏移量 : charoff
单元格可横跨列数 : colspan
单元格相关表头 : headers
单元格可横跨行数 : rowspan
将表头与单元格关联 : scope 
垂直排列方式 : valign
*/

3. 表格样式

/* 专用属性
border-collapse : separate | collapse
border-sapcing
caption-side
empty-cells
table-layout
*/

七、 美化表单

1. 表单

/* 表单结构
表单框架form
表单域input/select
表单按钮input/button

表单元素基本属性:name | id

所有 <form> 属性
accept-charset	规定用于表单提交的字符编码。
action	规定提交表单时将表单数据发送到何处。
autocomplete	规定表单是否应打开自动完成(填写)功能。
enctype	规定将表单数据提交到服务器时应如何编码(仅供 method="post")。
method	规定发送表单数据时要使用的 HTTP 方法。
name	规定表单名称。
novalidate	规定提交时不应验证表单。
rel	规定链接资源和当前文档之间的关系。
target	规定提交表单后在何处显示接收到的响应。
*/

2. 表单元素、属性、值

表单元素
HTML5表单的属性
input标签的属性 、input标签属性
< input > - type类型

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10084.html
标签
评论
发布的文章

用点jquery实现的登录页面

2024-06-06 00:06:07

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!