关闭

css学习

标签: css 前端csshtml
26人阅读 评论(0) 收藏 举报
分类:

最近工作接触前端,所以开始学习。通过慕课网学习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 高度一致

 

 

 

 

 

 

 

 


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:27次
    • 积分:10
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档
    阅读排行
    评论排行