CSS基本知识点(01)

0、未完,还有一部分未写

1、CSS背景

  属性                     描述
  background              简写属性,作用是将背景属性设置在一个声明中。
  background-attachment     背景图像是否固定或者随着页面的其余部分滚动。
  background-color          设置元素的背景颜色。
  background-image        把图像设置为背景。
  background-position        设置背景图像的起始位置。
  background-repeat        设置背景图像是否及如何重复。

2、 CSS文本

  属性           描述
  color          设置文本颜色
  direction         设置文本方向。
  line-height         设置行高。
  letter-spacing      设置字符间距。
  text-align        对齐元素中的文本。
  text-decoration    向文本添加修饰。
  text-indent         缩进元素中文本的首行。
  text-transform      控制元素中的字母。
  unicode-bidi        设置文本方向。
  white-space        设置元素中空白的处理方式。
  word-spacing       设置字间距。

3、CSS字体

  属性        描述
  font        简写属性。作用是把所有针对字体的属性设置在一个声明中。
  font-family        设置字体系列。
  font-size      设置字体的尺寸。
  font-style       设置字体风格。
  font-variant      以小型大写字体或者正常字体显示文本。
  font-weight      设置字体的粗细。

4、CSS链接

  a:link - 普通的、未被访问的链接
  a:visited - 用户已访问的链接
  a:hover - 鼠标指针位于链接的上方
  a:active - 链接被点击的时刻

  当为链接的不同状态设置样式时,请按照以下次序规则:
  a:hover 必须位于 a:link 和 a:visited 之后
  a:active 必须位于 a:hover 之后

  text-decoration 属性大多用于去掉链接中的下划线

5、CSS列表属性(list)

  属性          描述
  list-style        简写属性。用于把所有用于列表的属性设置于一个声明中。
  list-style-image     将图象设置为列表项标志。
  list-style-position     设置列表中列表项标志的位置。
  list-style-type     设置列表项标志的类型。

6、CSS表格属性(Table)

  属性          描述
  border
  border-collapse       设置是否把表格边框合并为单一的边框。
  border-spacing        设置分隔单元格边框的距离。
  caption-side        设置表格标题的位置。
  empty-cells         设置是否显示表格中的空单元格。
  table-layout        设置显示单元、行和列的算法。

7、盒子模型

  margin:外边距
  外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  padding:内边距
  border:边框
  border-style、border-color、border-width
  内容

8、CSS定位(position)

  1、相对定位(relative)
    1、占用文档流
    2、是基于原来文档流中的位置
    3、以边框为基准
  2、绝对定位(absolute)
    1、脱离文档流
    2、是以浏览器窗口为基本位置
    3、以边框为基准
  3、fixed
    相对于窗口的定位
  4、浮动(float)
    1、脱离文档流
    2、会把内容挤掉
    clear:
    清除前面的元素浮动对后面元素的影响
  5、relative和absolute混用
    1、元素作为容器时,设置为relative,其内部元素如果是absolute,内部元素以容器为基准

时间: 2024-10-03 22:20:42

CSS基本知识点(01)的相关文章

HTML和CSS的知识点

HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!----> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body>. HTML的三个常见头部标

css入门知识点整理

css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器.顾名思义,选择器就是用来"选择"HTML中的元素的.通过定义选择器可以选出HTML文档中的某些元素,然后把它们的样式变成声明中的.css的格式长这样: selector {declaration1; declaration2; ... declarationN } 这里有一个最基本的cs

HTML/CSS 知识点01 (转)

整个前端开发的工作流程 产品经理提出项目需求 UI出设计稿 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据) 前后台的交互 测试 产品上线(后期项目维护) 互联网原理 当用户在浏览器输入网址的时候,就会发送到对应的服务器,请求该网址对应的网页信息 服务器会把该网址对应的网页资源,都下载到你电脑的临时文件夹 临时文件夹中的资源,通过浏览器显示出来(所以,我们第二次请求网站的时候,速度会快很多) 元素 行内元素:一行中有n多个行内元素,行内元素不能设置宽和高 块元素:一个块元素,独自占一行

关于CSS重要知识点(1)

1. 盒子模型 CSS处理网页内容时,会把每一个元素"放在"一个盒子里,也就是所谓的盒子模型. 盒子模型包括4部分:内容,内边距(padding),边框(border)和外边距(margin) 上图展示了整个盒子模型的内容,怎么样?简单吧.如果你认为简单,那就大错特错了!! 盒子模型里边有一个坑,就是取元素的height和width时,可以多种方式来指定这个高和宽属性.换句话说在某些情况下,一个元素的height和width是不一样的.那么究竟是哪些情况下呢?答案就是box-sizin

JavaScript 知识点01

JS基础 页面由三部分组成: html:超文本标记语言,负责页面结构 css:层叠样式表,负责页面样式 js:轻量级的脚本语言,负责页面的动效和数据交互小总结:结构,样式和行为,三者相分离 在html页面中写结构 通过 link标签的href属性,引入css样式 通过script标签的src属性,引入js脚本 css引入页面的方式有三种 行内<div style="width:200px;height:300px;"></div> 内嵌:在header里面写一个

js,css小知识点记录

JS手册中提到:可以使用任意表达式作比较表达式.任何值为0.null.未定义或空字符串的表达式被解释为 false.其他任意值的表达式解释为 true.也就是说,这里会隐式的转换为布尔值. //css :#id .下属class(可以是直接或间接下属classs) #newfncbtnpanel .am-condition { margin-top: 10px; margin-left: 6px; margin-bottom: 5px; } show()\hide()  是jquery方法,即d

css常用知识点

1.css的简介  层叠样式表 样式表:有很多的属性和属性值 层叠:一层一层的.优先级 第一个:把样式和html分开显示 第二个:html的属性很少,css里面样式很强大 2.css和html结合方式 有四种结合方式 第一种结合方式:在每个html标签里面都有一个属性 style,在style属性里面写css代码  代码  <div style="color:black;">aaaaccccbbbb</div> 格式: style="属性名称1:属性值

CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应,另一列固定宽度

1:标有!important标记的样式 2:HTML编辑的样式 3:用户设置的样式 4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用 <!DOCTYPE html> <html> <head> <title> html5 </title> <link rel="stylesheet" type="text/css" href="css.css"> &

HTML5入门(CSS样式-------------------(CSS基础知识点----------------------------))

CSS继承性+层叠性+盒子+浮动 一.CSS继承性 eg:                 <style>                               div{                                      color: pink;                                      font-size: 30px;                                      width: 500px;