CSS基础知识(更新中)

<meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="样式文件所在链接">

  • <p class="x"> </p>
  • 类选择器:p.x{};;;;;;h1.x, p.x{};;;;;;.x{}
  • 。。。。。。。。。。。。。。。。。。。。。。
  • <p id="x"> </p>
  • #x{}
  • p#x{}


颜色:

  • color:
  • background-color;

背景图像

  • background-image:url(图像链接);
  • background-repeat:no-repeat(图像只会显示一个);
    • repeat;
    • repeat-x(只在水平方向上重复)
    • repeat-y(只在垂直方向上重复)
    • inherit(按照父元素的设置来处理)
  • background-position:top left;(左上角)

字体:

    • font-family:Verdana(PC 上),Geneva(MAC),Arial(MAC和PC),sans-serif(无衬线字体集);
    • font-size:以body的字体大小为准
      • body{font-size:small;large}相当于基本字体大小
      • h1{font-size:150%}
    • color:
    • font-weight:lighter;normal;bold;bolder;
    • text-decoration:

    • non
    • underline上划线
    • overline下划线
    • line-through有一条穿过的线
    • 指定样式的同时指定内容的含义:<del>{删除};<ins>{下划线,标记要插入的内容,填空?}
  • font-style:italic(斜体);(not)oblique(倾斜文本)

段落

  • line-heighe:1.6em;//各行之间的间距:[em:相对于字体大小]

盒模型

  • 内容区
  • padding:
    • padding-left:
    • padding-right:
  • border
    • border-width//边框宽度
    • border-style
      • solid 实线
      • double 两条线
      • outset外凸
      • inset 内凹
      • dotted 虚线
      • dashed 破折线
      • ridge 脊线
    • border-color
    • 合起来写:3px dotted gray;
    • 指定某一边的边框:border-top-color:……
    • top;left;right;bottom
    • 边框圆角:radius(px或者em)
  • margin
    • margin-left:
    • margin-right:
时间: 2024-10-09 03:26:26

CSS基础知识(更新中)的相关文章

CSS 基础知识(中)

例如: H3{ COLOR : BLUE }中,H3为挑选者,COLOR为性质,BLUE为COLOR性质的值. 二.基本单位的认识: 有相对单位与绝对单位两种单位 表达方式. 相对单位: 『em』:相对於字母高度的比例因子. 『en』:相对於字型大小的比例因子. 『%』:相对於长度单位(通常是目前字型的大小)的百分比例. 绝对单位: 『in』:英寸. 『cm』:公分. 『mm』:公厘. 『px』:像素(系统预设单位). 『pc』:pica,印刷活字单位. 『pt』:像点. 相对关系:1in= 6

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

(转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教

XHTML CSS基础知识

学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的. 本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或难点就讲解什么,较少讲解概念.因为概念这些东西很难说明白,或者说明白你也不一定

java学习篇之---css基础知识(一)

css基础知识(一) 1.css样式: 加载css样式有以下四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css" rel="stylesheet" type="text/css" /> 这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接.它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式. <style> h2 {

CSS基础知识梳理

CSS基础知识: 1.CSS层叠样式表(Cascading Style Sheets):解决内容与表现分离的问题. 2. 层叠次序: (1)浏览器缺省设置: (2)外部样式表: (3)内部样式表(位于 <head> 标签内部): (4)内联样式(在 HTML 元素内部): 即,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值). 3.CSS语法:CSS 规则由

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

html和css基础知识

一,html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等.2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现.3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下