html与css笔记（旧）

一：简介

h5 优点：兼容性强；更新方便

缺点：正因为其兼容性强，需要考虑的设备类型比较多，故用户体验差

h5开发工具 `

eclipse

Dreamweaver

webStorm （iOS）

web3.0时代

主流技术：HTML5+CSS3

HTML5：亮点：Canvas(画板)；音视频；存储（即数据库）；定位（Geolocation）；多线程处理

CSS3亮点：设计动画，2D变形

二：常用标签

网页组成：HTML（超文本标记语言：内容+结构）；CSS（样式美化）；JavaScript（动态效果）

三：

h5新增标签：

1.结构性标签;写在body里边

article:文章的主题内容

header：文章头

footer：文章尾部

section：文章的章节

nav:菜单导航，连接导航

2.块级性标签

完成web的块级划分

aside 注记

figure 对多个元素组合并展示的元素，常与figcaption联合使用

code 表示一段代码块

dialog 人与人之间的对话，包含dt（表示说话者）和dd（表示说话者的内容）两个组合元素

3..行内语义性标签

完成文本页面的具体内容的引用和表述（内容的引用和表述）丰富展示内容

meter：特定范围的数值；如工资数量，百分比

time ：时间值

progress ：进度条，可用max，min，step进行控制，完成对进度条的表示和监听

video：视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式

audio：音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式

4.交互性标签

功能性内容的表达，有一定内容和数据的关联，是各种事件的基础

details 表示一段具体的内容，默认不显示，通过魔种方式单击或legend交互才会显示

datagrid 控制客户端数据与显示，可用于动态脚本即使更新

menu 用于交互菜单

command ：用于处理命令按钮

二：CSS样式

CSS（Cascading Style Sheets）层叠样式表

用来红纸html中的样式，美化网页

CSS的编写格式是键值对形式的

属性名：属性值

有第三种书写形式

1.行内样式：（内联样式）直接在标签的style属性中写

2.页内样式

在本网页的style标签中写

<style>

div{

color: green;

background-color: yellow;

}

color: blue;

background-color: purple;

font-size: 40px;

}

</style>

</head>

3.外部样式

在单独的CSS文件中写，然后用link标签引用

CSS遵循一个规律：就近原则；叠加原则

src：引用，该资源是页面不可缺少的部分（img，video，radio）

href：引入，引入外部资源如a标签，link标签

三、CSS选择器

1.标签选择器

在head的style中div{}

<style>

div{

color: red;

}

color: blue;

}

</style>

2.类选择器

/*类选择器，CSS中注释方式*/

.high{

color: yellow;

}

.l{

background-color: purple;

}

3.id选择器(此标识在网页里是独一无二的，只能用一次)

#fi{

color: black;

background-color: green;

}

3.并列选择器

}/*并列选择器，逻辑或的关系，只要满足其中一种就坏改变样式*/

div,.higer{

color: blue;

font-size: 100;

background-color: yellowgreen;

}

4.符合选择器

/*符合选择器，逻辑与的关系*/

div.hihhrt{

color: white;

background-color: black;

font-size: 10px;

}

5.后代选择器

/*后代选择器*/

div p{

color: deeppink;

background-color: yellow;

font-size: 60px;

6、直接后代选择器

/*直接后代选择器*/

div > p{

color: white;

background-color: yellow;

}

7.相邻兄弟选择器

/*相邻兄弟选择器与div相邻的一个p标签*/

div + p{

color: hotpink;

}

8.属性选择器

/*属性选择器 */

/*一维属性选择器标签是div且有name属性的标签格式设置*/

div[name]{

color: black;

background-color: yellow;

}

/*二维属性选择器*/

div[name][age]{

color: peru;

background-color: yellow;

}

/*指定属性内容的选择器*/

div[name = "ll"]{

color: lawngreen;

background-color: black;

}

9.伪类选择器

伪类的属性

:active 向被激活的元素添加样式

:focus 向拥有键盘输入焦点的元素添加样式

:hover 当鼠标悬浮在元素上方的元素添加样式

:link 向未被访问的链接添加样式

:visited 向已被访问的链接添加样式

:first-child 向元素的第一个子元素添加样式

:lang 向带有指定lang属性的元素添加样式

10伪元素

属性

:first-letter 向文本的第一个字母添加样式

:first-line 向文本的首行添加样式

:before 在元素之前添加内容

:after 在元素之后添加内容

/*<!--CSS选择器遵循

1，在相同级别选择器中叠加原则，就近原则

2，类选择器的优先级大于标签选择器

3，id选择器的优先级大于类选择器

4. 范围越小优先级别就越高(针对性越强，优先级越高)

优先级整理：全职

通配符* 0

标签选择器：1

类选择器： 10

id选择器： 100

复合选择器： 101

import： 1000 !import改变优先级为最高

行内的style的优先级大于head中style的优先级，但是小于import

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先（就近原则）

优先级排序

import > 内联 > id > 类 > 标签|伪类|属性选择 > 伪元素 > 通配符 > 继承

-->*/

四、html标签的类型

html中有很多标签，根据显示的类型，主要可以分为三大类

1.块级标签独占一行的标签，能随时设置宽度和而高度（div，p，h，ul，li）

2.行内标签（内联标签）即多个标签可以显示在同一行；宽度和高度不可以改变，由内容决定(span，label，a)

3.行内块级标签（内联块级标签，既能改变宽度高度，又能使其在同一行）：多个块级标签在行内显示（input button）

修改标签的显示类型

CSS的display属性，此属性有四个取值：

none:相当于hidden；

block：(让标签变为块级标签，主要针对于行内标签和行内块级标签);

inline：让标签变为行内标签，主要针对于块级标签和行内块级标签

inline-block :让标签变为行内块级标签，主要针对于行内标签和块级标签

五、CSS属性

http://localhost:63342/05-CSS%E5%B1%9E%E6%80%A7/index.html webstorm相当于构建了一个本地属性

CSS有很多属性，根据继承性，主要分两大类

可继承属性

父标签的属性会传递给子标签

一般是文字控制属性

不可继承属性

行内块级属性，display属性不能继承

1可继承属性

1.1所有标签都可以继承的属性 visibility cursor

visibility 可见否（即使是不可见也是有占位的）visibility与display都可以隐藏标签，不同的是display隐藏标签后，连占位都没有了，而visibility隐藏标签后还有占位

cursor （光标的类型）pointer手 crosshair十字架

1.2 内联标签可继承的属性

line-height

color

font-family

font-size

font-weight

text-decoration

letter-spacing;word-spacing;white-space;font-style;font-variant;text-transform;direction(不常用)

1.3块级标签可继承的属性

text-indent（缩进）;text-align（对齐）

1.4 列表标签(ul;ol;li)可继承

list-style :列表标签前边的点的类型

list-style-type; list-style-position; list-style-image(不常用)

2.不可继承的属性

2.1display； margin； border； padding； background

display: inline; block; inline-block; none

background:

height; min-height ; max-height; width; min-width; max-width ;

overflow; position; left; right; top; bottom; z-index;

float,clear;

table-layout; vertical-align;

page-break-after; page-break-before

uinicode-bidi

3.CSS3新增属性

3.1 RGBA透明度 background-color: rgba(255,0,0,0.8); opacity

3.2块阴影与圆角阴影

块阴影 box-shadow ; text-shadow

圆角阴影 border: 20px solid yellow;

border-radius: 30px;

border-top-left-radius: 60px;

border-bottom-right-radius: 100px;

3.3边框图片 border-image

3.4形变

transform ：none | <transform-function>[<transform-function>]

六.盒子模型

盒子模型的四个属性

content （内容）

padding （填充）

border （内边距）

margin（外边距）

盒子模型的大小其实就是content的大小，而microsoft的盒子模型的盒子大小是border的大小

1.content:

属性 height max-height max-width min-height min-width width

2.padding（内边距）

属性 padding （复合属性四个值：上右下左三个值：上左右下两个值：上下左右一个值：上下左右边距相同） padding-bottom padding-left padding-right padding-top

3.border

属性：宽度样式颜色 border-width border-style border-color border-radius（此为复合属性，border-top-left-radius）

4.magin（类似于padding）

属性：margin margin-top margin-left margin-bottom margin-right

3.13居中

水平居中

css的style中的标签选择器中

text-align: center;即可对行内标签与行内块级标签居中进行设置，而对块级标签不好使，块级标签用margin进行整个标签的水平居中，而test-align：center只是对标签内容进行居中设置

竖直居中：

line-height：父标签的高度

第二天8.30

CSS布局

布局原则：标准流（从上到下，从左到右）

脱离标准流方法：

1.float 取值left（浮动在父标签的左边），right（浮动在父标签右边）

2.position：在父标签的任意位置

position取值：

absolute ：子标签若想相对于父标签进行定位，则子标签需要设置absolute（并在absolute下边设置top，left，right，bottom），而其相对于的父标签要设置relative，否则就会以body为父标签进行定位

relative：若某标签相对于父标签进行定位，则此父标签必须设置为relative

static：默认属性，如果父标签是static则会去找其父标签，若父标签也是static则会去找其父标签的父标签，如果多层父标签都是static则会找到body，以bady为其父标签进行定位

fixed ：

inherit：

注册登陆界面：

1有两层div；若想实现子层div在父层div居中，则将子层的块级标签转换为行内块级标签，然后在外层标签内些text-align：center；（转换为行内标签才有水平居中特性）

2在input样式中设置border，然后在此处只改颜色则，不会出现input输入框动的现象；若直接在focus样式中给border并设置其颜色和宽度会有动的现象

3.border-left-color: green;/**在focus状态下，input的左边栏的颜色设置*/

4. border: 0px;/*button有个默认的border，需要手动设置为0，才会消失*/

1.1块级标签水平居中的第二种方法：

直接在该块级标签的css中写以下两行代码：

margin: 0px auto;

text-align: center;

margin与test-align合用的方式

复习：

absolute：子标签设置为absolute

relative：父标签设置为relative

static：标签的默认属性

2016.3.14

Bootstrap网址

http://v3.bootcss.com/

1.bootstrap.css：没做过代码混淆的css，里边的代码是开源的，能看的,开发阶段用这个

bootstrap.min.css:做过代码混淆的css，里边的代码是看不了的，做过代码混淆的内存也会相对变小,上线时用这个

按钮：button

常用类：class = “btn btn-sucess”

class = “btn btn-warning”

class = “btn btn-danger”

面板：panel

class =“panel pannel-warning”//外层div

class = “panel pannel-heading”//子层div的标题

class = “panel pannel-body”//子层div的体

斜体标签：i(行内块级标签)

class = “badge”style = “background-color : red ; width : 50px; height :20px”

Glyph icons：字体图标(这是boot's'tbootstrap的标签行内块级标签)

字体图标的实质是对字体进行操作，所以其此字体的标签的大小要用font-size调整

注意：bootstrap引入到工程中的文件夹的名称切记不能修改

3.此处用相对路径

body{

background: url("../Image/bg.jpg")/*相对路径*/;

background-size: cover;

}

4.字体如何设置想要的宽度？

5.图片间距如何调整？

6.如何让那么多字自动换行？

宠物网跟做

网页中，很多都有默认边距的，应该上来就清掉，方法如下（使用并列选择器，逻辑或的关系）：

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{

padding: 0px;

margin: 0px;

}

清掉网页中原有的边距方法二

padding: 0px;

margin: 0px;

}

background: url("../img/tw.png”);//好多鸟的平铺图片为背景

background: url("../img/tw.png") no-repeat;//一只鸟的图片做整个的背景

3.使用外部字体

/*使用外部字体*/

@font-face {

font-family: 此处填写外部字体名称;

src: url(此处填写外部字体名称);

}

然后在要修改字体的标签的css中的font-family属性中填写外部字体名

/*使用外部字体*/

@font-face {

font-family:BebasNeue-webfont;

src: url("../fonts/BebasNeue-webfont.ttf");

}

body{

/*background: url("../img/tw.png");*/

/*background: url("../img/tw.png") no-repeat;*/

/*background: url("../img/pattern.gif") no-repeat;*/

background: url("../img/pattern.gif");

font-family: "BebasNeue-webfont";

}

块级标签自动换行

4.1给块级标签一个宽度（内容依据此宽度换行）

4.2在块级标签的css中设置（以div为例）

div{

word-wrap: break-word;

}

4.3注意，行内块级标签的内容会根据标签的高度和宽度而自动换行，不用设置word-warp：break-word

5.不透明度：

当hover时，鼠标放上去会有变化，设置opacity

6.响应式设计

@media screen and (max-width:1153px){

要修改的某个标签的css

}

html与css笔记（旧）相关推荐

html5 居于页面中心,css笔记：如何让一个div居于页面正中间
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...
CSS笔记-除了a标签外的hover属性的应用
CSS笔记-除了a标签外的hover属性的应用内容简介:以下写的可能对于大部分网友来说可能很简单,但是我自己确实是不知道的. 有一段这样的html: div a href=# img alt=i am ...
HTML+CSS笔记5
HTML+CSS笔记5 strong和b.em和i 优势:可以不用多个class进行区分,简化选择器操作引用标签 iframe标签 br与wbr map与area embed与object audi ...
慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
CSS 笔记（十二）：预处理器 —— Less
CSS 笔记(十二):预处理器 -- Less 什么是 CSS 预处理器 CSS 预处理器就是使用某一种语言为 CSS 增加一些动态语言的特性,使用 CSS 预处理器可以使 CSS 具有简洁,适应性强 ...
HTML与CSS笔记
HTML与CSS笔记一.HTML: IDE快捷键: tab:补全标签 ctrl+/:快速注释常用标签: <h1.h2--h6:六级标题 <p:段落 <strong:粗体 < ...
【CSS笔记】CSS文本颜色、字母大小写、文本对齐、文本装饰线、文本字体
目录一.CSS笔记 1.1.CSS文本颜色 1.2.CSS字母大小写 1.3.CSS文本对齐 1.4.CSS文本缩进.间距.行高 (1)如何计算行高??? 1.5.CSS文本装饰线 1.6.CSS字 ...
HTML+CSS笔记4
HTML+CSS笔记4 position定位特性取值 static(默认) relative(相对定位) absolute(绝对定位) fixed(固定定位 ) sticky(粘性定位) CSS添 ...
Html 和 CSS笔记
html 和 css 原文链接:https://blog.csdn.net/Lin16819/article/details/102759862 不断学习,后期的新增笔记会继续加到文章上方点击链接后 ...
HTML+CSS笔记（当作工具书使用）
说明:该笔记为学习<千锋教育_最新版/前端/Web前端/HTML5/教程1000集全套视频带项目>时所整理 ①拨云见日 HTML基础 Web前端的三大核心技术: HTML:结构 CSS:样 ...

html与css笔记（旧）

html与css笔记（旧）相关推荐

最新文章

热门文章