首页 思维导图 详情

HTML+CSS

2019-01-26 14:39:35 288 举报
AI智能生成
HTML+CSS
为你推荐
查看更多
css
css
HTML+CSS项目化内容
HTML+CSS项目化内容
CSS
CSS
1.HTML+CSS+移动web
1.HTML+CSS+移动web
HTML5
HTML5
html解析流程
html解析流程
简单了解html和css
简单了解html和css
HTML+CSS网页设计详解
HTML+CSS网页设计详解
HTML+CSS 知识点汇总
HTML+CSS 知识点汇总
HTML+CSS核心整理
HTML+CSS核心整理
前端基础知识
HTML+CSS
前端基础总结
作者其他创作
大纲/内容
front end
CSS
 选择器
ID选择器
#id{属性名：属性；}
注意:“#”表示“id”
类选择器
.class｛color:red;｝
注意:“.”表示“类”
标签选择器
div{width:80px;}
群组选择器
如：<ul>与<div>共用一种颜色
ul ，div{color:red;}
通配符选择器
*｛margin:0;padding:0;｝
\"*\"代表全局属性 一般作用于初始化
后代选择器
#links a {color:red;}
后代选择器 顾名思义 所有#links下的<a>链接“全部”字体颜色变成red
子选择器
#links > a {color:blue;}
伪类选择器
a:link 是用在未访问的链接的选择器
a:link { font-size: 14px; text-decoration: underline; color: blue; }
a:visited 是用在已访问过的链接的选择器
a:visited { font-size: 14px; text-decoration: underline; color: orange; }
a:hover 是用在鼠标光标放在其上的链接的选择器
a:hover { text-decoration: underline; color:green; }  与  a:hover span{ color:red; }
a:active 是用在获得焦点（比如，被点击）的链接的选择器
a:ctive{text-decoration: underline; color: gray; }
CSS引入的几种样式
外部样式
<link rel=\"stylesheet(规定当前文档与链接文档之间关系)\"  type=\"text/css(文件格式)\" href=\"(文件名称)\"/>
内嵌样式
<head><style=\"text/css\">样式拽写</style></head>
行内样式
<div style=\"属性：属性值;...\"></div>
CSS属性
背景属性
背景图像：background-image:url(图像路径);
设置背景图片不重复：background-repeat:no-repeat；默认重复
以上两句结合使用：background-image:url() 0 0 no-repeat;
最近使用  background-image 加其它属性 不管用了，可以把image去掉background:是简写，除URL外，后面还可以设置图片的其他属性，用空格隔开；background-image:url就只能接图片的路径这一个属性。
background-attachment 属性设置背景图像是否固定(fixed)或者随着页面的其余部分(scroll)滚动。
background-size属性用来处理一些不规则图片，实际运用比较少，图片已经处理好了
background-image: （线性渐变）linear-gradient(方向，起始颜色，过度颜色）；radial-gradient(径向渐变) 
渐变线的长度可以改变，拉出的渐变线越长，色块隔得越远，渐变越自然，拉出的渐变线越短，色块隔得越近，渐变越生硬。
子主题
盒子模型
定义宽高：width，height
内边距上右下左：padding:top right bottom left;
也可以单独设定如：padding-top:50px;
外边距：margin:top right bottom left;
margin:0 auto;网页居中
边框属性
边框颜色：border-color
也可以通过上下左右规定单独风格 如：border-top-color
边框风格：border-style
风格属性值
solid实线  dashed虚线  dotted点状   double双线   none无边框
 groove 3D 凹槽边框      ridge垄状边框 
大部分时候我们通过简写方式：border:soild 1px red;来实现正常效果
border-radius:px与%;添加圆角边框
当然也可以单独规定border-top-left-radius
轮廓属性：outline:color style width;
向方框添加一个或多个阴影:box-shadow:0(水平) 0(垂直偏移) 0(模糊半径) 颜色;
文本也有个渲染效果text-shadow
边框宽度 与上下左右的设置 比较随心，多种多样，真正用处较少，了解即可
如：border-top-width，border-top-style.....
布局相关属性
浮动float
left 与right
清除浮动clear:both;
overflow溢出处理
hidden隐藏超出规定内容，scroll无论是否超出添加滚动条   auto超出自动添加滚动条  visible显示
display显示属性
none元素隐藏或关闭    block 生成一个块元素    inline生成一个或多个行内元素   inline-block该元素生成一个块状盒 ，随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
opacity属性 设置元素的透明度  0~1之间变化
position定位方式，没有任何继承性，只读
relative相对于其正常位置进行定位   absolute相对于第一个父元素进行定位   fixed相对于浏览器窗口进行定位
元素的位置通过 \"left\
堆叠层级通过z-index进行对比（优先级）较大的元素会覆盖较小的一个
字体与文本属性
  font-family字体定义      font-size字体大小  font-style:italic(斜体) oblique(倾斜);
cursive草书字体  serif 带衬线字体  可以了解一些带有特色的字体
font-weight字体粗细  font-variant字体大写
bold(粗)  bolder(更粗)  inghter(更细)  700=blod  400=normal
文本修饰text-decoration:underline(下划线) line-through(删除线) ;
单词间距word-spacing   字母间距letter-spacing   行高line-height   text-indent首行缩进
text-align:left，right，center;水平对齐作用块元素     vertical-align:top、middle、bottom;垂直对齐内联元素
text-overflow: ellipsis | clip ;    inherit；继承
文本溢出省略号代表  和修剪
white-space:nowrap; 属性设置如何处理元素内的空白。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
列表属性
编号类型:list-style-type 定义列表项符号
编号图像:list-style-image
标记位置：list-style-position:inside(里面) onside(外面);
光标cursor
Pointer(一只手)   wait(程序等候)  help(问号)   Move(可被移动)  Crosshair(十字线)  text(文本)
HTML
列表
定义列表<dl>
特殊符号
&nbsp;-->空格
&gt;-->大于号，&it;-->小于号
&copy；-->版权符号
<aside> 的内容可用作文章的侧栏。
<dt>定义列表中的项目
<a href=\"#c\">用于跳转段落
<hr/>水平线   <br/>换行    <pre>定义预格式化的文本
<b>实体标签  <strong>逻辑标签
<dd>描述列表中的项目
<del>定义文档中已被删除的文本   替代<s>
<ins>被插入文档中的文本  替代<u>用户会把它混淆为一个超链接
强调内容<em>， <i>基于物理的斜体
有序列表
<ol><li></li></ol>
Type属性：1(默认值number)，A，a，i，I
CSS样式：list-style-type: none，upper-roman，lower-alpha 其它不支持
无序列表
<ul><li></li></ul>
type属性：disc(实心圆，默认值)，circle(空心圆)，square(正方形)，decimal(数字)
XHTML 1.0 Strict DTD与html4.01中不被支持和不赞成使用
表格由<table>定义
<tr>定义表格中若干 行
每行被分割为若干单元格由<td>定义
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格...
 colspan 和 rowspan 属性可横跨的列数与行数
 valign 属性：top，bottom，baseline(与基线对齐)，middle
表格的表头使用 <th> 定义 呈现粗体居中效果
<table>属性
border表格边框的宽度
border-top-width，border-left-style  通过这两种方式可以满足大部分边框样式需求
cellpadding单元格内文字与边框的距离，cellspacing单元之间的距离
frame规定外侧边框哪个部分可见
above 显示上部的外侧边框，below显示下部的外侧边框
lhs 显示左边  rhs显示右边
hsides 显示上部和下部   vsides显示左边和右边
rules规定内侧边框哪个部分可见
rows位于行   cols位于列之间的线条  all位于行和列之间的线条
rules 属性无法在 Internet Explorer、Chrome 或者 Safari 中正确地显示。
大部分表格属性在html5中都不支持或不赞成使用，以上是一些的特殊方法使用，其它推荐使用css边框样式拽写
<frameset>定义框架集
rows  cols 属性表示横向 与纵向分割 ，frameborder属性:是否显示框架边框 0(NO)和1(YES)两个值
<frame>与<ifrsme>标签
name属性   src属性   scrolling属性：是否显示滚动条  在html5中 不支持这两个标签了，了解就好 
表单由<form>定义
<form>标签
action 属性：规定向何处提交表单的地址（URL）
method 属性：定在提交表单时所用的 HTTP 方法：（默认：GET），POST
<input> 标签的属性
不同的 type 属性，可以变化为多种形态。
button点击，submit提交 ， reset重置，image(alt)定义图像作为提交按钮  file浏览选择文件上传
checkbox(复选框)  radio(单选)     text(文本)   password(密码遮蔽)等常用属性值。html5中增加了多种形态变化
checked(预选)   size属性   src 属性 name属性在html常用
disabled属性  规定应该禁用的input  ， readonly属性规定文本只读   通过js判定布尔值实现目的
input其它属性和值就不多介绍...
for属性规定 label 与哪个表单元素绑定
通过在 <label>中放入<input>来隐式地连接起来的
<textarea>定义多行的文本输入控件
可以通过 cols 和 rows 属性来规定 textarea 的尺寸
更好的办法是使用 CSS 的 height 和 width 属性
style=\"resize:none; 固定大小
<fieldset> 将表单内容的一部分打包，生成一组相关表单的字段
<legend> 标签为 fieldset 元素定义标题
name 属性是 <fieldset> 在 HTML5 中的新属性
<select>定义下拉列表
<optgroup>定义选项组
label属性必须描述text内容
<option>定义select的内容
value属性送往服务器的内容
selected属性 定义预选一个项
multiple属性  同时选择多个选项    windows：按住 Ctrl 按钮      Mac：按住 command 按钮
 name属性 用于对提交到服务器后的表单数据进行标识 或引用数据    size属性：可选数目
<head></head>之间是网页头部可见内容
<meta charset=\"UTF-8\">html编码格式
php编码格式-->header(\"Content-Type:text/html; charset=utf-8\");
<title></title>网页标题
<link rel=\"stylesheet\" type=\"text/css\" href=\"\">导入css样式
<body></body>之间是页面可见内容
查看代码源
javascript: s=document.documentElement.outerHTML;document.write(\"<body></body>\");document.body.innerText=s;
粘贴到地址栏
view-source:http://网址
评论
0 条评论
回复 删除
取消
回复
下一页