weixin_30687587
weixin_30687587

DIV+CSS学习笔记（CSS）

  • css基础知识：

    • css样式表的定义

    • css：（Cascading Style Sheets）层叠样式表；

  • 分类及位置：内部样式-head区域style标签里面

    • 外部样式-link调用

    • 内联样式-标签元素里面

  • css内的注释：/*注释内容*/

  • css样式表的语法

    • 用颜色名表示

    • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, 
      　　olive, orange, purple, red, silver, teal, white, and yellow

    • 有17个预先确定的颜色，它们是

    • CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。

    • 盒子名或者标签名{属性:值;}

    • CSS中几种颜色的表示方法

- **用十六进制的颜色值表示(红、绿、蓝)**
  - `#FF0000`或者`#F00 ` - **用rgb(r,g,b)函数表示**
  - 如：`rgb(255,255,0)`- **用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)**
  - 如：`hsl(120,100%,100%)`,色调0代表红色，`120`代表绿色，`240`代表

蓝色

 - **用`rgba(r,g,b,a)`函数表示 **
   - 其中`a`表示的是改颜色的透明度，取值范围是`0~1`，其中`0`代表完全透明- **用hsla(Hue,Saturation,Lightness,alpha)函数表示**
  - 色调、饱和度、亮度、透明度

  • 例子

   
        background-color:gray

        background-color:#F00

        background-color:#ffff00

        background-color:rgb(255,0,255)

        background-color:hsl(120,80%,50%)

        background-color:rgba(255,0,255,0.5)

        background-color:hsla(120,80%,50%,0.5)

    

DIV+CSS学习笔记（CSS）_第1张图片


 
  p{color:red;}
 

第九章 css选择器(上)

第十章 css选择器(下)

第十一章 背景属性

  • 背景属性：

    • 背景图片是否随着内容的滚动而滚动由background-attachment设置

    • background-attachment:fixed; 固定，不随内容的滚动而滚动

    • background-attachment:scroll; 滚动，随内容的滚动而滚动

    • background-size:x% y%;

    • background-size:x y;

    • 背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。

    • background-position:x% y%;

    • background-position:x y;

    • 背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现

    • background-position的取值可为英文单词或者数值和百分值。

    • background-positon的英文单词取值

    • top left

    • top center

    • top right

    • center left

    • center center

    • center right

    • bottom left

    • bottom center

    • ottom right

    • 不平铺：background-repeat:no-repeat;

    • 水平方向平铺：background-repeat:repeat-x;

    • 垂直方向平铺：background-repeat:repeat-y;

    • 完全平铺：默认为完全平铺

    • background:url(“images/1.jpg”);

    • backgronnd-image:url(“images/1.jpg”);

    • background:red;

    • backgronnd-color:red;

    • 背景的添加 ：

    • 背景颜色的添加:

    • 背景图片的添加：

    • 背景的平铺

    • 什么是平铺？平铺就是图片是否重复出现

    • 背景图片的定位

    • background-positon的数值取值

    • positon的百分值取值

    • 背景图片的大小

    • background-size的数值取值

    • background-size的数值取值

    • 背景图片的滚动

第十二章 文字文本属性

  • css文字文本属性：

    • text-align:center; 文本对齐(right/left/center)

    • line-height:10px; 行间距(可通过它实现文本的垂直居中)

    • text-indent:20px; 首行缩进

    • text-decoration:none;

    • letter-spacing: 字间距

    • 文本线(none/underline/overline/line-through)

    • color:red; 文字颜色

    • font-size:12px; 文字大小

    • font-weight:“bold” 文字粗细(bold/normal)

    • font-family:“宋体” 文字字体

    • font-variant:small-caps 小写字母以大写字母显示

    • 文字属性

    • 文本属性

第十三章 盒子模型

  • 盒子模型

    • 盒子模型就是一个有高度和宽度的矩形区域

    • 所有html标签都是盒子模型

    • div标签自定义盒子模型

  • 所有的标签都是盒子模型

    • class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

  • 盒子模型的组成

    • 自身内容： width、height 宽高

    • 内边距： padding

    • 盒子边框： border 边框线

    • 与其他盒子距离： margin 外边距

    • 内容+内边距+边框+外边距=面积

    • 盒子模型组成部分：

  • border 边框

    • 常见写法 border:1px solid #f00;

  • 单独属性：

    • dotted 点状虚线

    • dashed（虚线）

    • solid（实线）

    • double（双实线）

    • border-width:

    • border-style:

    • border-color (颜色)

  • padding 内边距

    • padding:10px; 上下左右

    • padding:10px 10px; 上下 左右

    • padding:10px 10px 10px; 上 左右 下

    • padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）

    • 值：像素/厘米等长度单位、百分比

  • 单独属性：

    - `padding-top:`- `padding-right:`- `padding-bottom:`- ` padding-left:`

  • 当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

  • margin 外边距

    • 值：与padding相同

    • 单独属性：与padding相同

  • 外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

补充盒子模型内容

  • 标准盒子模型

    • 盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

DIV+CSS学习笔记（CSS）_第2张图片

DIV+CSS学习笔记（CSS）_第3张图片

你用的盒子模型是？
" style="color: rgb(0, 136, 204);">网页链接你用的盒子模型是标准w3c盒子模型

第十四章 块元素、行元素与溢出