firemail»论坛 › 开发语言 › CSS › CSS学习笔记

CSS学习笔记

查看数: 3308 | 评论数: 7 | 收藏 0

关灯 | 提示：支持键盘翻页<-左右->

帖子模式

java

发布时间: 2017-7-11 17:54

正文摘要:

https://www.w3cschool.cn/css/ CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称 CSS语法由三部分构成：选择器、属性和值： selector {property: value} 如何使用CSS？有三种方法可以在站点网页上 ...

java 发表于 2017-8-11 15:43:06

以下是几个最常被用到与文字样式有关的 CSS 属性。

direction

letter-spacing

line-height

text-align

text-decoration

text-indent

text-transform

word-spacing

direction

direction 属性是用来设定文字的方向。可能的值为 'ltr' 及 'rtl'。

letter-spacing

letter-spacing 属性是用来设定每一个字母之间的空间

line-height

line-height 属性是用来设定每一行之间的空间。

text-align

text-align 属性是用来设定文字是如何对齐。可能的值包括：

left：靠左对齐

right：靠右对齐

center：向中间对齐

justify：左右对齐

text-decoration

text-decoration 属性是用来设定文字上有什麽装饰。可能的值包括：

underline: 文字下加上一条线。

overline: 文字上加上一条线。

line-through: 文字中间加上一条线划过去。

blink: 让文字闪烁。

text-indent

text-indent 属性是用来设定每一段的第一行前面要留多少空间。可设定的值包括百分比以及长度。

text-transform

text-transform 属性是用来控制大小写是如何展现的。可能的值包括：

capitalize：每一个字的第一个字母都以大写显现，其他的字母则不改变。

uppercase：所有的字母都以大写显现。

lowercase：所有的字母都以小写显现。

none：大小写不做任何改变。

word-spacing

word-spacing 属性是用来设定每个字与每个字之间的距离。

java 发表于 2017-8-11 15:34:04

css position

在 CSS 中常见的位置 (position) 属性有以下几种：

position

top

right

left

bottom

overflow

z-index

position

position 属性制定出要用哪一类的位置。可能的值有：

static (预设值): 这代表元素会被放在预设的地方。如果 position 的值是被设定为 statics 的话，那 top、bottom、left、和 right 的值就都没有意义了。

absolute: 这代表元素会被放在浏览器内的某个位置 (依 top、bottom、left、和 right 的值而定)。当使用者将网页往下拉时，元素也会跟著改变位置。

relative: 这代表元素被放的地方将会与预设的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。

fixed: 这代表元素会被放在浏览器内的某个位置 (依 top、bottom、left、和 right 的值而定)。当使用者将网页往下拉时，元素的位置不会改变。

top, right, bottom, left

每一个方向 (top, right, bottom, left) 的位置值可以是长度、百分比、或是 auto。

overflow

overflow 属性是用来设定当内容放不下时的处理方式。可能的值包括：

visible: 内容完全呈现，不管放得下放不下。

hidden: 放不下的内容就不显示出来。

scroll: 无论内容放得下放不下，都加入上下卷轴及左右卷轴的功能。

auto: 当内容放不下时，加上卷轴的功能。

z-index

z-index 属性是用来决定元素重叠的顺序。换言之，当两个元素有重叠的情况时，z-index 值将会决定哪一个元素在上面。z-index 值比较大个元素会被放在上面。

java 发表于 2017-8-10 20:05:55

css 表格table
在 HTML 中，常看到 <table> 之内加了 border、cellpadding、及 cellspacing 的属性。如果我们有透过 CSS 来制定表格的样式，那就不需要在 HTML 之内用到这些属性了。

table、th、tr、及 td 这几个选择器可以使用许多在这个教学中有提到的 CSS 属性，例如文字、字体、边框、颜色、以及背景。

来看个例子。假设我们想要把以下的样式加入表格内：

表格：没有边框，字体是 arial，字的大小是 14px。
标题：背景是黄色。
格子：每个格子的下面有一条黑色实线。
低于 60 的分数栏内，字体是红色的。
我们就会使用以下的样式表：
table {
  border: 0;
  font-family: arial;
  font-size:14px;
}
th {
  background-color:yellow;
}
td {
  border-bottom:1 solid #000000;
}
.fail {
  color:#FF0000;
}
以下是html代码
<table>
  <tr>
<th>学生</th>
<th>分数</th>
  </tr>
  <tr>
<td>Stella</td>
<td>85</td>
  </tr>
  <tr>
<td>Sophie</td>
<td>95</td>
  </tr>
  <tr>
<td>Alice</td>
<td class="fail">55</td>
  </tr>
</table>
效果如下
学生分数
Stella 85
Sophie 95
Alice 55

border-collapse
在这裡我们要特别提到一个跟表格有关的 CSS 属性，那就是 border-collapse。基本上，这个属性可以直接代替 cellspacing=0 的渲染代码。我门来看看下面的例子：
CSS 渲染代码如下，
table {
  border:0;
  border-collpase:collpase;
  width:200px;
}

tr {
  border-bottom:1px solid #000;
}
以下的 HTML 码，
<table>
  <tr><td>年度</td><td>收入</td></tr>
  <tr><td>2006</td><td>35.2M</td></tr>
  <tr><td>2007</td><td>40.1M</td></tr>
</table>
效果如下
年度          收入
2006 35.2M
2007 40.1M
请注意到，年度拦及收入栏的下划线中间并没有空隙。这就是 border-collapse:collapse 的作用。

http://www.vxzsk.com/882.html

java 发表于 2017-7-14 10:45:05

CSS3教程

CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块、背景边框、文字特效、多栏布局等等。

CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

学习CSS3，自然是要搭配着html5以及javascript一起进阶，这样才能够更加全面地掌握到建站技术。

本书知识点

CSS3生成工具

CSS3 Maker：http://www.css3maker.com/

CSS3 Generator：http://www.css3.me/

CSS3 Drop shadow generatr：http://www.cssmatic.com/box-shadow

CSS3代码生成器：http://www.w3cschool.cn/tools/index?name=layerstyles

CSS3圆角生成器：http://www.w3cschool.cn/tools/index?name=circularbead

CSS3调试工具

Modernizr,HTML5/CSS3 特性检测库：http://modernizr.cn/

CSS3 transform(变形)和transform-origin(变形原点)调试工具：http://www.w3cschool.cn/tools/index?name=css3_transform

CSS3 Text Stroke(文本描边)和text-fill-color(文本填充色)调试工具：http://www.w3cschool.cn/tools/index?name=css3_textstroke

CSS3 border-radius(圆角)效果在线调试工具：http://www.w3cschool.cn/tools/index?name=css3_borderradius

CSS3 Text Shadow(文本阴影)效果在线调试工具：http://www.w3cschool.cn/tools/index?name=css3_textshadow

CSS3 Box Shadow(阴影)效果在线调试工具：http://www.w3cschool.cn/tools/index?name=css3_boxshadow

Firefox的Linear Gradients (线性渐变)在线调试工具：http://www.w3cschool.cn/tools/index?name=moz_LinearGradients

java 发表于 2017-7-12 09:16:46

CSS Positioning(定位)

https://www.w3cschool.cn/css/css-positioning.html

CSS Float（浮动）
https://www.w3cschool.cn/css/css-float.html

		自动登录	找回密码
密码			立即注册

CSS学习笔记

正文摘要:

回复