CSS学习笔记(一)

1、背景

  background:url() no-repeat left center red;

  background-repeat、background-position、background-image、background-color

2、文字的样式

  font-size 改变文字的大小

  font-weight  加粗文字

  font-family  字体

  font-style   italic斜体   normal正常

  text-indent   缩进 10px 2em

  font:12px/2 arial,sans-serif;  表示font-size是12px, line-height是font-size的2倍,后边的是字体。可能这个就是最少的font了

  说下em,px,rem的区别

  px就是字体大小,写上之后,即使页面放大,字体应该是不会变大的

  em是个单位,比如父级的font-size是12px,子级设置font-size位2em,那么子级的font-size真实大小是24px;

   <div style="font-size:12px;">我是测试</div>
        <div style="font-size:12px;"><p style="font-size:2em;">我是测试</p></div>

  如果父级设置了em,子级再设置em,那么子级真实的大小时父级的em*子级的em,看下面的例子

*{ margin:0; padding:0; list-style:none;}

body{font-size:12px;}

p{font-size:2em;}
    .div1{ font-size:2em;}
    .div2{ font-size:2em;}  

<div class="div1">我中测试</div>
    <div class="div2">
        <p>我中测试</p>
    </div>

如果给body的font-size设置em的话,以浏览器默认字体大小为奇数,一般就是16px,就是body{font-size:1em;}相当于body{font-size:16px;},font-size还可以用百分比

对于rem,是css3新增的单位,如果父级为rem,子级也为rem,那么子级的真实rem还是子集的值

3、从外到内,从上到下去写页面

4、white-space:nowrap强制文字不换行,text-overflow:ellipsis加省略号  overflow:hidden; 溢出隐藏

5、css的书写位置:style="css样式" --行间样式

<style type="text/css"></style>内联样式

6、HTML实体符号

&lt;    <

&gt;   >

7、IE6不支持a以外标签的hover

8、div#box(禁止用)   div.box必须是div并且有一个class是box

  选择器的前面最好限定范围,span页面里所有span都选中了。

  注意:继承没有直接给的大。

  继承    #box .text

  直接给  span

  这个标签会执行span的样式

9、css样式继承

  font-size、font-weight、font-family、font-style、line-height、

  color ->a特殊,不能继承父级的颜色

10、

  块标签:div  p   h1

    独占一行

    能给宽高

    不给width的时候,width为100%

  行内标签:a    span

    共处一行

    不能给宽高,宽高靠内容撑起来

行内块标签:img input

    能给宽高,共处一行

  嵌套规则:

    块:能套块标签和行内标签。但是p比较特殊,它不能再包含其他的块标签。

    行内:只能嵌套行内标签。

  IE6不支持块的inline-block

html语义化:该用什么标签就用什么标签,用大包住小,不要为了实现样子,就乱用标签。不要为了css而改变HTML

11、什么时候用图片

  图片作为网页中的内容出现时,用img

  图片作为修饰(可有可无)时,用background

12、ul无序列表,ol有序列表,<dl><dt>标题</dt><dd>内容一</dd><dd></dd></dl>描述列表

13、 盒模型:width+padding+border, margin不是盒模型的一部分

  注意:行内标签的margin和padding是不完整的,只有左右没有上下。

  块margin塌陷

    下边元素的margin-top,上边元素的margin-bottom,中间的距离是margin-top和margin-bottom最大的。

    注意:塌陷只存在于上下!左右margin没事

14、margin-top合并

  父级的margin-top和子级的margin之间没有border,padding,就会发生合并,父级和子级一起拥有margin-top

  解决问题:

    1、父级加一个border

    2、父级加padding-top(推荐)  height(其次)

    3、父级overflow:hidden(推荐)

  能用padding(推荐),就是用padding,因为margin会有一些问题。

15、浮动:

  浮动特性:

    1、浮动后脱离文档流

      其他元素当浮动的东西不存在,占据浮动元素的位置

    2、文本环绕

    3、浮动能让块到一行

    4、浮动是有顺序的left、right

    5、浮动后,父级宽度不够会被挤下来

    6、浮动后,被挤下来的元素会跟着最高的元素走

    7、浮动后,行内变块(能给宽高)

浮动三要素:

    1、有一个元素浮动,同级元素都要浮动

    2、有浮动,就必须清除浮动

    3、浮动的元素,必须要有宽度(最好有宽度,虽然有时候不加宽度也没事儿)

16、无语意标签:i、b、span等。

17、

    

时间: 2024-11-25 18:00:26

CSS学习笔记(一)的相关文章

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

CSS学习笔记:溢出文本省略(text-overflow)

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制         top/right/bottom/left  定位元素偏移量. absolute绝对定位/定位层级 osition:absolute;  绝对定位 a.使元素完全脱

css学习笔记.1--以校园资讯平台为例

#id .class 这两个是最先要记住的..id是<a id="Sth">中的Sth,class是<ul class="Oth">中的Oth,挺好记得 margin 老记成marign...看来是align害的,介绍是"层的边框以外留的空白"-以下图片来自 这里 如图: 就是说最外层的是margin,最内层的是padding,是盒模型{主要定义四个区域:内容(content).边框距(padding).边界(border