前一篇写了我们的Html的常用组件，当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式，可以说是非常之丑到爆炸了，我们肯定是不能让用户去看这样丑到爆炸的样式，所以我们在这里需要使用css样式来美化一下前面的组件，让我们的页面更美观。

在开始css这部分之前，我们需要先在此着重提一下div这个标签，div标签在网页的标准化布局上起到了决定性的因素，我们通过使用div+css，可以完美的让我们的每个组件去到它自己应该去的地方。

<div></div>

我们在学习css样式前，需要从css选择器开始学起

css选择器

css常用选择器用下面这几种

  • 派生选择器
  • id选择器
  • class类选择器
  • 属性选择器
  • 元素选择器

1、派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

<style>

    div p{

            color: red;

            font-size: 20px;

    }

</style>

<div>

    <p>这是一个派生选择器的样例</p>

</div>

2、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

#idtest{

    color: blue;

    font-size: 30px;

}

<div id="idtest">

    <span>这是一个id选择器的样例</span>

</div>

id 选择器和派生选择器，在现代布局中，id 选择器常常用于建立派生选择器。

#idtest span{

    color: blue;

    font-size: 30px;

}

<div id="idtest">

    <span>这是一个id选择器的样例</span>

</div>

3、class类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

.classtest{

    color: blue;

    font-size: 30px;

}

<div class="classiest">

    <span>这是一个id选择器的样例</span>

</div>

4、属性选择器

对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。如下所示：

[title]

{

color:red;

}

<p title="liml">Hi!liml</p>

<p title="hello">Hi!hello</p>

[title=liml]

{

color:red;

}

<p title="liml">Hi!liml</p>

<p title="hello">Hi!hello</p>

5、元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

html {color:black;}

p {color:gray;}

h2 {color:silver;}

创建css

创建样式的方式有三种，第一是使用外部链接，第二种是使用内部的<style>标签，最后一种就是在标签的style属性中添加css样式。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

<style>

p{ color:red}

</style>

<p style:"color:red">

CSS样式

1、文本样式：

# 字体

font	简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family	设置字体系列。

font-size	设置字体的尺寸。

font-style	设置字体风格。

    normal - 文本正常显示

    italic - 文本斜体显示

    oblique - 文本倾斜显示

font-weight	设置字体的粗细。

color    字体颜色

a:link - 普通的、未被访问的链接

#实例：

a:link {background-color:#B2FF99;}

a:visited - 用户已访问的链接

# 实例

a:visited {background-color:#FFFF85;}

a:hover - 鼠标指针位于链接的上方

# 实例

a:hover {background-color:#FF704D;}

a:active - 链接被点击的时刻

# 实例

a:active {background-color:#FF704D;}

#行间距

p{line-height: 200%}

2、表格样式

border-collapse	设置是否把表格边框合并为单一的边框。

    separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

    collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

    inherit	规定应该从父元素继承 border-collapse 属性的值。

table-layout	设置显示单元、行和列的算法。

    automatic	默认。列宽度由单元格内容设定。

    fixed	列宽由表格宽度和列宽度设定。

    inherit	规定应该从父元素继承 table-layout 属性的值。

3、CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

padding: 10px;

margin: 10px;

border: 1px solid red;

padding-bottom:1px;

padding-top:1px;

padding-left:1px;

padding-right:1px;

4、CSS定位

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow	设置当元素的内容溢出其区域时发生的事情。

clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。

vertical-align	设置元素的垂直对齐方式。

z-index	设置元素的堆叠顺序。

首先从position来开始看，这里很重要；

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

overflow常用值

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit

规定应该从父元素继承 overflow 属性的值。

前面我们层级说过块级和内联元素，块级会直接占满该行，而内联元素的会在当前行内继续填充内容。当然如果我们想让一个内联元素能够转换为块级，或者块级转换为内联，此时我们就可以使用display属性来完成了，下面的是display常用的元素

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值） 
li{

	display:inline;

	width:50px;

}

li{

	display:block;

	width:50px;

}

<ul>

	<li>列表1</li>

	<li>列表2</li>

	<li>列表3</li>

	<li>列表4</li>

	<li>列表5</li>

</ul>

前端基础之CSS快速入门的更多相关文章

  1. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  2. 前端基础之HTML快速入门

    什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...

  3. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  4. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  5. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  6. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  7. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  8. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  9. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

随机推荐

  1. git log 查找

    查找含有某个字符串的 commit git log --grep=224 // 这条命令是查看含有 "224" 关键字的 git commit 查看某个作者 git log --a ...

  2. js传入和传出参数乱码

    向js传入参数乱码问题 第一种解决方法 当Js中输出内容中包含中文,可能会导致出现乱码. 如何解决: 1. 设置页面编码: Html代码 <meta http-equiv="Conte ...

  3. Instantclient安装

    Instantclient安装 成功

  4. learning scala 操作符

    scala 操作符: 算术运算符:  +  - *  / % 关系统运算符: > , < ,= ,!= ,>=,<=, 逻辑运算符: && . || , ! 位 ...

  5. POJ 2663 Tri Tiling 矩阵快速幂 难度:3

    Tri Tiling Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7841   Accepted: 4113 Descri ...

  6. logging- 日志记录

    https://www.cnblogs.com/yyds/p/6901864.html logging提供给了两种记录日志的方式: 第一种方式是使用logging提供的模块级别的函数 import l ...

  7. linux free 理解

    free命令:显示Linux系统中物理内存.buffer/cache.swap的使用情况. virtual-machine:~$ free total used free shared buffers ...

  8. MyEclipse 2017 CI 10 发布（附下载）

    挑战全年最低价!MyEclipse线上狂欢仅剩最后3天!立即抢购>> 2017 CI 10主要是一个错误修复版本,这个版本为Angular和TypeScript工具提供了重要的修复,并为I ...

  9. localforage 对不同浏览器 使用不同的缓存策略 , 大大提高了性能 ,IndexedDB，WebSQL 和 localStorage 三种存储模式

    支持回调的异步 API: 支持 IndexedDB,WebSQL 和 localStorage 三种存储模式(自动为你加载最佳的驱动程序): 支持 BLOB 和任意类型的数据,让您可以存储图片,文件等 ...

  10. 一款经典的 jQuery Lightbox 灯箱效果

    一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery Lightbox v2.7.1 github 实例预览 使用方法 载入 CSS 文件 <link rel=&qu ...