学习CSS
CSS教程
菜鸟教程
通过使用CSS我们可以大大提升网页开发的工作效率
什么是CSS?
- CSS指层叠样式表(Cascading Style Sheets)
- 样式定义如何显示HTML元素
- 样式通常存储在样式表中
- 把样式添加到HTML中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可层叠为一
CSS语法
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
CSS Id和Class
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义.
#para{
text-align: center;
color: red;
}
class选择器以一个点"."号显示:
.center{
text-align: center;
}
CSS创建
插入样式表的方法有三种
- 外部样式表
- 内部样式表
- 内联样式表
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
内部样式表
<head>
<style>
hr {
color: red;
}
p {
margin-left: 20px;
}
</style>
</head>
内联样式
<p style="color: red;">这是一个段落</p>
CSS背景
CSS属性定义背景效果
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
body {
background-color: #33eeee;
}
颜色值定义:
- 十六进制 如: "#eeeeee"
- RGB 如: "rgb(244, 0, 0)"
- 颜色名称 如: "red"
背景图像
body {
background-image: url("paper.gif");
}
水平或垂直平铺
body{
backgrond-image: url("pag.jpg");
backgrond-repeat: repeat-x;
}
设置定位与不平铺
body{
background-image: url("img.jpg");
background-repeat: no-repeat;
}
可以利用background-position属性改变图像在背景中的位置
body{
background-image: url("img.jpg");
background-repeat: no-repeat;
background-position: right top;
}
简写属性
body{
background: #ffffff url("img.jpg") no-repeat right top;
}
顺序为:
- background-color 背景颜色
- background-image 背景图像
- background-repeat 背景如何重复
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动
- background-position 设置图像的起始位置
CSS文本格式
属性 | 描述 |
---|---|
color | 设置文本颜色 |
direction | 文本方向 |
letter-spacing | 字符间距 |
line-height | 行高 |
text-align | 对齐元素中的文本 |
text-desoration | 文本添加修饰 |
text-indent | 缩进文本的首行 |
text-shadow | 文本阴影 |
text-transform | 控制元素中的字母 |
unicode-bidi | 设置或返回文本是否被重写 |
vertical-align | 元素的垂直对齐 |
white-space | 设置元素中空白的处理方式 |
word-spacing | 设置子间距 |
CSS字体
属性 | 描述 |
---|---|
font | 在一个声明中设置所有的字体属性 |
font-famail | 指定文本的字体系列 |
font-size | 指定文本的字体大小 |
font-style | 指定文本的字体样式 |
font=variant | 让小型大写字体或正常字体显示文本 |
font-weight | 指定字体的粗细 |
CSS链接
- a:link 正常,未访问过的链接
- a:visited 用户已访问过的链接
- a:hover 当用户鼠标放在链接上时
- a:active 链接被点击的那一刻
CSS盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容
不同部分的说明:
- margin(外边距) 清除边框外的区域,外边距是透明的.
- border(边框) 围绕在内边距和内容外的边框
- padding(内边距) 清除内容周围的区域,内边距是透明的.
- content(内容) 盒子的内容,显示文本和图像
学习CSS的更多相关文章
- 学习 CSS 样式
1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: ...
- css知多少(2)——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- 如何深入学习CSS
学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...
- 【图片版】学习CSS网格布局
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
- 学习CSS的思路(转)
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
随机推荐
- 关于method not exist:think\db\Query->render错误解决方法
{volist name="Teachers" id="Teachers" key="key"} <tr> <td> ...
- Linux下实现免密码登录
1.Linux下生成密钥 ssh-keygen的命令手册,通过”man ssh-keygen“命令: 通过命令”ssh-keygen -t rsa“ 生成之后会在用户的根目录生成一个 “.ssh”的文 ...
- C语言 scanf函数
#include <stdio.h> void test1() { // 1.提示用户输入数据 printf("请输入一个整数:"); // 2.接收用户输入的数据 i ...
- c++利用互斥锁实现读写锁
很简单就是在读的时候把写的锁锁住就好了 class readwrite_lock { public: readwrite_lock() : read_cnt(0) { } void readLock( ...
- 【转】android ListView详解
由于google doc 很多人都打不开,故更新了源码下载地址 [源码下载]----2011-01-18 在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根 ...
- c#加一个后台线程
- 去掉video视频播放器下的下载按钮
去掉video视频播放器下的下载按钮: video::-internal-media-controls-download-button { display:none; } video::-webkit ...
- Android学习笔记_15_网络通信之文件断点下载
一.断点下载原理: 使用多线程下载文件可以更快完成文件的下载,多线程下载文件之所以快,是因为其抢占的服务器资源多.如:假设服务器同时最多服务100个用户,在服务器中一条线程对应一个用户,100条线程在 ...
- 网页静态化技术Freemarker
1.为什么要使用网页静态化技术 网页静态化解决方案在实际开发中运用比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道. 对于电商网站的商品详细页来说,至少几百万个商品,每个商品又有大量的信息 ...
- Mvc5 控制器,视图简单说明
本系列会比Mvc4更详细.Mvc4记录或没记录的东西这里也会提到. 控制器 自动装配: 一般自动装配对于添加的时候比较好用 视图: 控制器返回的视图,其实就是一些静态的HTML.动态性不好,从控制器传 ...