CSS 学习笔记
0、CSS概念
层叠样式表（Cascading Style Sheets）,CSS的来历就不必多说了。可以简单的理解为万维网联盟（w3c）为了丰富HTML页面的布局和外观而指定的一种标准。
1、CSS实例：
CSS规则主要由选择器和至少一条声明组成：
/*注释格式*/
p{
color:red;
text-align:center;
}
2、id 选择器和calss 选择器
/*id 是唯一的标签 id 为 idName 的那个标签会遵循以下样式*/
#idName
{
text-align:center;
color:red
}
/* class 是一类标签 ，样式表作用域下 页面中所有标签中类名为 className 的 都会遵循以下 样式*/
.className
{
text-align:center;
color:red
}
3、优先级：1，2，3，4 优先级依次升高
1、浏览器默认样式
2、外部样式
3、内部样式
4、内联样式
多重样式表会重叠为一个
外部样式表示例
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表示例：
<head>
<style>
hr
{
color:sienna;
}
p {
margin-left:20px;
}
body{
background-image:url("images/image.gif”);
}
</style>
</head>
内联样式表 示例：（在标签内写 style）
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
4、CSS背景：
background-color:
body {
/* CSS中 颜色的表示方法：
十六进制：”#ff0000”
RGB:”RGB(255,0,0)”
颜色名称：”red”
*/
background-color:#003344
}
background-image
body{
background-image:url(“xxx.jpg”);/* 默认图像只在水平和垂直方向平铺*/
}
background-repeat/*图像的重复方式*/
body{
background-image:url(“xxx.jpg”);
background-repeat:repeat-x;/* 图像只在水平方向平铺*/
}
background-attachment/*图像是否在页面上固定*/
body{
background-image:url(“xxx.jpg”);
background-attachment:fixed;/*固定背景图像位置*/
/*背景图像是否固定或者随着页面的其余部分滚动。默认 scroll 背景图片随页面的其余部分滚动。inherit 继承父元素
*/
}
background-position/*背景图像的位置*/
/*有9个位置可选，类似9宫格
left top center top right top
left center center center right center
left bottom center bottom right bottom
也可以使用百分百 x%，y%是默认值 左上角 0%0%（前一个数字代表水平偏移量，后一个代表垂直偏移量）
也可以xpos ypos （前一个数字代表水平偏移量，后一个代表垂直偏移量）
ps:用百分比会有一个特殊的算法，
0% 0% 图像的左上角会和父元素的左上角重合，
50% 50% 图像会在 父元素的正中间，
100% 100% 图像的右下角会与父元素的右下角重合
inherit 继承自父元素
*/
body{
background-position:right top;/*控制背景图像的位置*/
}
/*背景简写：简写时 属性值顺序： color image repeat attachment position*/
body {
background:#ffffff url(image.png) no-repeat right top;
}
background-size
{
background:url(image/xxx.gif);
background-size:100% 100%;/*拉伸并占满真格背景作用域*/
}
/*background-Origin属性指定background-position属性应该是相对位置注意如果背景图像background-attachment是"固定"，background-origin属性没有任何效果。*/
/* background-clip属性指定背景绘制区域
*border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
*content-box 背景绘制在内容方框内（剪切成内容方框）。
*padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
*/
body
{
/*多个背景图片*/
background-image:url(/upload/love/css.gif),url(/upload/love/html.gif);
}
5、text 文字
5.1 text color 文本个颜色
W3C标准规定：如果你定义了颜色属性，那么你还必须定义背景色属性
body{
color:blue;
}
h1 {
color:#00ff00;
}
h2{
color:rgb(255,0,0);
}
5.2 text-align 文本对齐方式
h1{
text-align:center;
}
p.date {
text-align:right;
}
p.main{
text-align:justify;
}
5.3 text-decoration 修饰
h1{
text-decoration:overline;/* 文本上面划线*/
}
h2{
text-decoration:line-through;/*文本中间划线 */
}
h3{
text-decoration:lint-underline;/*文本下部划线*/
}
h4 {
text-decoration : blink;/* 定义闪烁文本*/
}
/* 还可以是 none 和 inherit */
5.4 text-transform :uppercase 文本 转大写
/*text-transform:lowcase 文版转小写 text-transform:capitalize 首字母大写*/
p.uppercase{
text-transform:uppercase
}
5.5 text-indent: 文本缩进
p {
text-indent:5px;
}
/*主要属性：
属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
*/*
5.6 direction 文字方向
ltd 默认 left to right 默认，文本方向从左到右
rtl right to left 文本方向 从右到左
inherit 规定应该从父元素 继承direction 属性值
5.7 letter-spacing
字母间距
h1 {
letter-spacing:2px; /* 默认 normal 还可以继承 inherit*/
}
h2{
letter-spacing:-3px;
}
5.8 line-hight 行高
p.small {
line-height:90%;
}
p.big{
ling-hight:200%;
}
5.8 text-shadow：基本文字阴影
text-shadow: h-shadow v-shadow blur color;
/*h-shadow: 必须 水平阴影的位置： 允许为负值
*v-shadow: 必须 竖直阴影的位置： 允许为负值
*blur : 可选 模糊距离
*color: 阴影的颜色
*/
5.9 vertical-align:text-top
设置一个元素的垂直对齐
值 描述
/*baseline 默认。元素放置在父元素的基线上。
*sub 垂直对齐文本的下标。
*super 垂直对齐文本的上标
*top 把元素的顶端与行中最高元素的顶端对齐
*text-top 把元素的顶端与父元素字体的顶端对齐
*middle 把此元素放置在父元素的中部。
*bottom 把元素的顶端与行中最低的元素的顶端对齐。
*text-bottom 把元素的底端与父元素字体的底端对齐。
*length
*% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
*inherit 规定应该从父元素继承 vertical-align 属性的值。
*/*
5.10 white-space: 段落中空白属性
/*
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应 该从父元素继承 white-space 属性的值。
*/*
5.11 word-spacing:30px; 定义单词间的距离为 30px
6、a样式连接
a：link - 正常，未被访问过的连接
a:visited 用户已经访问过的连接
a:hover 当用户鼠标放在连接上时
a:active 当用户点击的那一刻
a:link {
color:#FF0000;
} /* unvisited link */
a:visited {
color:#00FF00;
} /* visited link */
a:hover {
color:#FF00FF;} /* mouse over link */
a:active {
color:#0000FF;} /* selected link */
CSS 学习笔记的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记：溢出文本省略（text-overflow）
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- Segment set
题目大意: 在一个平面上,给定N根线段,若某条线段与另一条线段相交,则将它们归于同个集合,给定k,问第k条线段所在的集合中线段的数量. 题目分析: 问题主要考察计算几何和并查集. 首先我们要判断两条线 ...
- Gossip算法
Gossip算法因为Cassandra而名声大噪,Gossip看似简单,但要真正弄清楚其本质远没看起来那么容易.为了寻求Gossip的本质,下面的内容主要参考Gossip的原始论文:<<E ...
- Linux From Scratch - Version 7.7-systemd （中文）
Linux From Scratch - Version 7.7-systemd: https://linux.cn/lfs/LFS-BOOK-7.7-systemd/index.html
- int main( int argc, char **argv)
1.参数 (有时参数是void) argc是程序运行时参数个数 argv是存储参数的数组,可以用char* argv[],也可以用char **argv. 例如编译一个hello.c的程序 1 #in ...
- 利用CAReplicatorLayer实现的加载动画
在上一篇中,笔者简要介绍了CAReplicatorLayer,在本篇中,将介绍具体的实用价值. 实用CAReplicatorLayer作为核心技术实现加载动画. 首先,创建一个UIView的子类 @i ...
- Django【进阶篇 】
Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...
- jsf初学解决GlassFish Server 无法启动
由于公司需要用JSF开发项目.公司同事都不熟悉,本人C# 转JSf.开发工具 netbeans GlassFish. 遇到GlassFish 非常 纠结的问题.搞了好一段时间,, 装好GlassFis ...
- MyBabis 用法详解
MyBatis 一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架(消除了几乎所以得JDBC代码和参数的手工设置及结果集的检索) MyBatis可以使用简单的XML或注解用于配置和原始映射,将 ...
- iOS--NSTimer设置定时器的两种方法
//方法一: //创建定时器 NSTimer *timer=[NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(next ...
- NOIP200806 火柴棒等式【B005】
[B005]火柴棒等式[难度B]———————————————————————————————————————————————————————————— [题目要求] 给你n根火柴棍,你可以拼出多少个 ...