css学习

原创 2015年07月07日 00:04:59

最近工作接触前端,所以开始学习。通过慕课网学习css+html。 记录下自己的一些笔记.希望每天都能进步。

html

标签的用途、标签在浏览器中的默认样式。

<p> 标题

<h1~h6> 标题标签

<em> 斜体

<strong> 粗体

<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

<q> 双引号

<blockquote>长文本

&nbsp; 空行

<addrss>地址

<code> <pre> 显示源码

<ul> <li></li></ul> 无序标签

<ol> <li></li></ol> 有序标签

<div>一些独立的逻辑部分划分出来,容器

     逻辑部分:页面上相互关联的一组元素

<table><tr> <th> <td> .... >

<ahref="mailto:100545519@qq.com?subject=nihao&body=dajiahao">还可以发送邮箱

在 label 标签内点击文本,就会触发此控件。

 

html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

display:block

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

 

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

display:inline

1、和其他元素都在一行上;

2、元素的高度、宽度、行高及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变

 

常用的内联块状元素有:

<img>、<input>

display:inline-block

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

三种样式的优先级别:内联式 > 嵌入式 > 外部式

                浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

                   !important 例外

权值?标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100

选择器:

标签   html代码中的标签

    类    class=""   .className

   id     id= ""   #idName

       区别: id唯一

    子类  p>p1

    后代  p p1 

    通用   *{}

    伪类  标签的某种状态

文字排版

 

盒子模型

margin 外边界

border 边框

padding 内边距

width内容宽度

边框:border围绕着内容补白的线,这条线你可以设置它的粗细样式颜色(边框三个属性)Left right top bottom

宽度/高度:css内定义的宽(width)和高(height),指的是填充以里的内容范围

填充:padding元素内容边框之间是可以设置距离的,称之为填充。填充也可分为上、右、下、左(顺时针)

paddingmargin的区别,padding在边框里,margin在边框外。

 

布局模型

1、  流动模型(Flow

块级元素:自上由下,默认宽度100%

内联元素:从左到右

2、  浮动模型 (Float)

元素并排显示: float:left, right

3、  层模型(Layer精确定位

a.绝对定位(position: absolute)

元素从文档流中拖出来,然后使用leftrighttopbottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

b.相对定位(position: relative)

通过leftrighttopbottom属性确定元素在正常文档流中的偏移位置,偏移前的位置保留不动。

c.固定定位(position: fixed)

 相对移动的坐标是视图(屏幕内的网页窗口)本身

RelativeAbsolute组合使用

 参照定位的元素:relative  参照元素:absolute

 

盒模型代码简写:顺时针,top right bottom left, t-b相同可以简写,r-l相同可以简写

颜色缩写:每两位的值相同,可以缩写一半

字体缩写:至少制定font-size, font-family

颜色值:color,:xxx;  color:rgb();

http://www.cnblogs.com/qixuejia/p/4190755.html 颜色参考

长度值:px   em   %

水平居中设置:

行内元素:如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的

 …..

垂直居中:设置父元素的 height 和 line-height 高度一致

 

 

 

 

 

 

 

 


相关文章推荐

CSS基础学习胶片

  • 2015年10月27日 00:45
  • 6.99MB
  • 下载

CSS3学习心得

  • 2015年12月01日 23:44
  • 3KB
  • 下载

韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 在上一个博客中未完成的矩阵转置的问题:韩顺平_轻松搞定网页设计(html+css+javascript)_第28...

DIV+CSS有利学习资源

  • 2017年08月11日 22:48
  • 4.86MB
  • 下载

css介绍快速学习

  • 2015年04月28日 09:38
  • 29KB
  • 下载

HTML、CSS、JavaScript学习总结

学习总结 HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构; – 用CSS描述网页的排版布局; – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素...

CSS页面制作学习

  • 2015年06月20日 16:05
  • 610KB
  • 下载

css学习笔记

  • 2013年10月21日 16:26
  • 3KB
  • 下载

WEB前端学习笔记-CSS基础教程

通过使用 CSS 来提升工作效率!在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。CSS 概述•CSS 指层叠样式表 (Cascading Style Sheets)...

CSS 特效、实例、供大家学习

  • 2008年10月28日 18:22
  • 1.41MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css学习
举报原因:
原因补充:

(最多只允许输入30个字)