html&css基础-01

一、环境搭建

浏览器 --- 谷歌/火狐/IE/Safari（苹果系统浏览器） // 读

编辑器 --- HBuilder/Dw/记事本  //写 

二、语言了解

HTML  超文本标记语言    【基本架构-堆雪人组成部分】

语言: 和浏览器沟通的

标记: <文本>  

                   双标签:  

                  单标签：

文本: 显示文本内容

超文本: 显示图片、显示视频、播放音乐....

CSS  层叠样式表 【化妆-定型】

比如一个雪人的描述: 

高度:80cm 

体重:10Kg

一个元素的描述:  style="width: 100px; height: 100px; background: red;"

// 属性名: 属性值;

width:100px;// 宽度为100像素

height:100px;// 高度为100像素+ 

background: red;// 背景为红色————————————————————————————————————style="width: 100px; height: 100px; background: red;"

Javascript    脚本语言【干活-智能化】

// 点击之后要做的事情     

onclick="this.style.width='800px';"this.style.width='800px';

// 自己(this) 的(.) 样式(style) 的(.) 宽度(width)  = '800像素'!

[](http://upload-images.jianshu.io/upload_images/1801379-93337a73fba0e270.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

三、常用标签

  注释方式

注释的目的：1，让代码更容易懂     2，方便阅读以及后续的维护

标题

标题内容  [其中#是1~6]

代码如下

效果如下

段落

段落文本内容(段落与段落之间有间距)

床前明月光 疑是地上霜 举头望明月 低头思故乡

文本节点

 文本节点

你知道我再等你吗 ？

span标签可以放在p标签里,p标签不应该放在span标签里

换行

语法:

备注: 换行是一个空标记，是强制换行

床前明月光
疑是地上霜 举头望明月 低头思故乡

img图片

// src: 图片路径(网络图片url/本地图片path)

alt ：text类型   //规定图像的替代文本。

src：URL       //规定显示图像的 URL。

height：  //定义图片的高度  100 像素

width：   //定义图片的宽带 

文本输入框

// type: 文本类型 // placeholder: 提示文本 // value: 输入框中内容

 

密码输入框

// type: 文本类型 // placeholder: 提示文本 // value: 输入框中内容

按钮

//type: 按钮类型

// value: 按钮名称

超链接

// href='链接地址'

文档区域(网页结构布局)

四、样式表写法

内联样式表

内部样式表

外部样式表

   当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

html文件

css 文件内容

五、选择器

类型选择符(标签选择器)

语法: 标签名称 {属性:属性值;}

例如: div{width:30px;}

类选择符(class选择器) [可以同名]

语法: .class名{属性:属性值;}  例如:    .top{width:300px; }   

ID选择符(id选择器)

语法: #id名{属性：属性值;}  例如:    #box{ height: 300px }注意: 整个文档中，id名必须是唯一标识

包含选择符(后代选择器)

语法: 选择符1  选择符2{属性：属性值;}  例如:    .header .left{ background: red; }啦啦啦

通配符

  语法: *{属性：属性值;}

  说明: 通配选择符的写法是“*”，其含义就是所有元素；表示该样式适用所有网页元素；

伪类选择符

语法: 元素:hover{ 属性: 属性值; }            说明: 鼠标移入

六、CSS核心属性

width: 宽度

  width: 100px;

height: 高度

  height: 200px;

background

background-color: 背景颜色

  background-color: purple;

background-image: 背景图片

  background-image：url(背景图片的路径及全称);

background-repeat: 背景图片平铺

  background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x/repeat-y

background-size: 背景图片大小

  background-size: 宽度 高度;

  例如: background-size: 100% 100%;

background-position: 背景位置

  background-position:left/center/right/数值  top/center/bottom/数值; 

background: 背景属性的缩写

  background:url(背景图片的路径及全称) no-repeat center top;

color: 文本颜色

  color: black;

font-size: 字体大小(默认是16px)

  font-size: 13px;

text-align: 水平对齐方式

{text-align:left/right/center/justify;}justify: 实现两端对齐文本效果(可以使文本两端都对齐；在两端对齐文本中，文本行的左右两端都放在父元素的边界上，然后调整单词和字母间的间隔，使各行的长度恰好相等);

line-height: 行高

  line-height: 30px;

  备注: 单行文本等于容器高时，文本垂直居中;

text-decoration: 文本属性

  text-decoration: none没有修饰符/underline添加下划线/overline添加上划线/line-through删除线

  备注: a标签比较常用

border: 边框属性

简写:    border: 线型(solid/dashed/dotted/double)  粗细(数值+单位)  颜色    例如: border:3px solid red;    border-width 边框的粗细    border-style 边框的线型    border-color    边框的颜色    solid:实线，dashed:虚线，dotted:点状线，double:双线

margin:边距(一般用于调整盒子位置)

边界: margin，在元素外边的空白区域，被称之为边距;  margin-left: 左边界 / margin-right: 右边界  margin-top: 上边界 / margin-bottom: 下边界  属性值的4种方式：  四个值：上 右 下 左  三个值：上 左右 下  二个值：上下 左右  【margin:0auto; 即表示上下边距为0，左右边距为自动】  一个值：四个方向 margin:2px; 定义元素四边边界为2px

padding: 填充(一般用于调整盒子内容位置)

填充:padding，在设定页面中一个元素内容到元素的边缘(边框)之间的距离，也称之为补白；  用法:    > 用来调整内容在容器中的位置关系;    > 用来调整子元素在父元素中的位置关系;      注:padding属性需要添加在父元素上;    >padding值是额外加载元素原有大小之上的，如果想要保证元素大小不变，即元素宽高上减去添加的padding属性值;  说明：可单独设置一方向填充，如：padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;    四个值：上 右 下 左 {padding:10px20px30px40px;}        注: 顺时针方向    三个值：上 左右 下 {padding:10px20px30px;}    二个值：上下 左右 {padding:10px20px;}    一个值：四个方向padding:2px; 定义元素四周填充为2px

float: 浮动属性

语法:float:none/left/right; 说明:float:定义网页中其它文本如何环绕该元素    left:元素活动浮动在文本左面    right:元素浮动在右面    none:默认值，不浮动。 备注:    浮动框可以向左或右边移动，直到它的边缘碰到包含边框或另外一个浮动框的边框为止；    浮动框是脱离了普通的文档流；

border-radius圆角

语法:    border-radius: 圆角半径// 圆角半径为20pxborder-radius:20px;

box-shadow阴影

  语法:

    box-shadow: h-shadow v-shadow blur color;

    h-shadow: 水平阴影的位置。允许负值。

    v-shadow: 垂直阴影的位置。允许负值。

    blur: 模糊距离。

    color: 阴影的颜色。

  box-shadow: 5px 5px 10px black;

音频

视频

内嵌网页

七、案例 --- 照片墙

transition: 过度效果

/* transition: 过度效果;

    transition-property: 过渡属性(默认值为all)

    transition-duration: 过渡持续时间(默认值为0s)

    transiton-timing-function: 过渡函数(默认值为ease函数)

    transition-delay: 过渡延迟时间(默认值为0s)

  */transition: all5s;// 所有属性，过渡效果持续时间5秒

transform: 形变

/* transform: 形变

    该属性允许我们对元素进行旋转、缩放、移动；

    translateX: 水平方向移动

    translateY: 垂直方向移动

    rotate: 旋转

    scale: 缩放 

  */transform: rotate(-5deg) scale(1.2);// 逆时针旋转5°，放大1.2倍

作者：EndEvent

链接：https://www.jianshu.com/p/70ede22f6e40

來源：

著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。