web前段入门笔记

html:结构
css:样式
JavaScript:行为
DOCTYPE:DOC-document文档,TYPE-类型,作用:告诉浏览器以什么方式
打开文本:
html:根元素
head;头部标签
meta:设置标签,charset编码,utf-8中文编码
title:标题标签
body:身体标签
单标签:
双标签:开始标签-结束标签,html

css引入方式:
1.行内样式:写到标签 style属性引出,属性跟到引号里面 style(直接
属性)=": (间接属性);"

2.内部样式:
head标签里面加上style标签
3.外部样式:
<link rel="stylesheet" href="css文件位置"/>link rel=“slylesheet
脚本”href引入css文件夹
*结构表现行为分离
!important>行内
行内样式>内部样式
行内样式>外部样式
行内样式>class
行内>id
class>element(元素标签)
内部样式外部样式(就近原则)
id>element
id>class
!important>行内>id>class>element(就近原则)
margin:外边距 padding:内边距
标签分类:
块级元素:默认占整行,宽度可设,独自占一行(例如
div/p/h1..h6/ol/li/dl/dt/dd/table/form/article/aside/footer/heade
r/hgroup/main/nav/section/blockauote/hr...)
行内块元素:默认不占整行默认宽度和内容一样,可设宽(例如
button/img/input/iframe/video/embed/canvas/audio/objiect)
行内元素:默认宽度和内容一样,宽度不可设(例如
b/a/strong/spon/code/label)
首页样式:style
nav导航样式
class命名的css加点
id命名用#引
hover(鼠标悬浮悬浮)border:(边框)dashed(虚线)solid(实线)

box:hover
position四个方向决定位置(两个就够,水平和垂直选一个)
1:relative:相对定位,定位之后原始位置保留,新位置不占位,相对于
自己的定位。
2:absolute:绝对定位,不占位置,相对于最近的带有定位属性的父级定
位。
3:fixed:固定定位,相对于浏览器视窗定位。
*****************************************************************属性:***********************************************************************
color:文字颜色
text-indent:px;
font-size:px;(字体大小),单位px默认12px
font-weight(字体厚度):bold;(加粗)
text-align:center;(居中)
background(背景)
height(高度)
margin-top:设置元素的上外边距
margin:0 auto;(左右居中)
display:block(转换块级元素)
float:left;(向左浮动)
list-style:none;(去除自动序列号)
*注意文字大小颜色居中
line-height(行高)
插入img先转换成块级元素
&nbsp加空格
!important;(权重优先级)
box-sizing;给box定一个标准 border-box;box边框(锁住盒子)
background-image:url(../);插图
background-size(背景大小)
background-repeat(背景覆盖):no-repeat(不覆盖)
display:inline转换成行内快元素
position:relative;相对定位absolute;绝对定位fixed;固定定位
transform:
rotate(翻转)
translate(平移)
scale(放大缩小比例)
outline:none去轮廓
border-radius:;(弧度r半径)
box-shadow:px px 颜色;(盒子阴影)
transition:.时间(全部完成时间)
<input type="text" />
在input标签里添加: placeholder="请输入用户名"
textarea可调节的文本框
background-size有3个属性:

auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任
何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。
这种属性通常用来做重复性的背景或者做半透明图片背景。
cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐
藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,
需要结合实践理解。
contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是
由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住
div时,图片会自动平铺。

text-decoration 有 5 个值:
none取消
underline下划线
overline上划线
line-through中间线
blink闪烁
text-transform 属性处理文本的大小写。这个属性有 4 个值:
none
uppercase大写
lowercase小写
capitalize首字母大写
white-space: normal;空白符合并
white-space 设置为 pre空白符不会被忽略
white-space: nowrap取消换行
border-collapse:collapse;合并表格边框
transparent:透明;
parallelogram:平行四边形
rectangle:长方形
square:正方形
triangle:三角形
nth-child()第几个
public公共的
main主要的
cursor:pointer;鼠标型状
item:小元素
a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。
font-weight:normal取消加粗
z-index层级
普通流层级小于定位后的层级
opacity透明度
font-style:italic;字体样式斜体
id只能在同一个项目出现一次(身份证)
letter-spacing字母间距
word-spacing单词间距
background-position:pxpx;,% %;center left right bottom top;
background-attachment:fixed;固定背景图像
overflow:这个属性定义溢出元素内容区的内容会如何处理。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

其他*******************
px的特性是属于绝对数值,他不受外围的单位影响,只要固定是12px,就
会以12像素呈现。以下方的范例来说,他并不会受到外围文字大小所影响
,内部的文字大小还是依据CSS设定所呈现。
em
另一个常见的文字单位是em, em是相对的的数值单位,它会受到外围的文
字大小所影响,而1em即是1的文字大小,1.5em也就是1.5倍的文字大小。
跟随所在容器文字大小改变
代码都属于关键字
保留字是关键字的拓展

猜你喜欢

转载自www.cnblogs.com/sw-3/p/9442826.html