今天聊聊CSS

1、CSS是什么

CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。

在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

2、CSS作用

CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。

3、基本样式

  • font-size 字体大小
  • font-size:12px对象文字大小为12px
  • float 浮动
    *Float:left靠左浮动
  • Float:right靠右浮动
  • width 宽度
  • Width:20px 对象宽度20px
  • height 高度
    • Height:20px 对象高度20px
  • margin外边距
  • Margin:1px 2px 3px 4px 对象上距离1px;右为2px;下为3px;左为4px
  • padding内补距
  • Padding:1px 2px 3px 4px 对象内距离边上为1px;右为2px;下为3px;左为4px
  • border边框
  • Border:1px solid #111 对象边框为1px宽黑实线
  • font-family 字体
  • font-family"黑体"; 对象文字字体为黑体
  • font-weight 文字加粗
  • font-weight:bold对象文字被加粗
  • line-height 行高
  • line-height:20px 对象内上下2排文字行高为20px(包括文字自身占用高度)
  • text-decoration 文字装饰(下划线、删除线)
  • text-decoration:underline 对象文字加下划线
  • background 背景属性
  • background:#FFF url(bg.png) repeat-x 0 0对象背景色为白色、背景图片为bg.png按X轴分析重复显示并距离顶部和左为0像素
  • text-align内容左中右对齐

更多样式请 查看CSS手册

4、基本选择器

CSS是一种用于屏幕上渲染htmlxml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。

h1 {color:blue;}
p {color:silver;}
  • 类选择器—为了将类选择器的样式与元素关联,必须将 class指定为一个适当的值

This heading is very important.

.important {color:red;}
  • ** id选择器**—选择器可以为标有特定 id 的 HTML 元素指定特定的样式,选择器以 "#" 来定义

这个段落是红色。

#red {color:red;}

5、伪元素

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

  • 伪元素包括这些

  • ::after—可以在元素的内容之后插入新内容

  • ::before—可以在元素的内容前面插入新内容

  • ::first-letter—用于向文本的首字母设置特殊样式

  • ::first-line—用于向文本的首行设置特殊样式

  • ::selection—定义用户鼠标已选择内容的样式

  • ::backdrop—用于改变全屏模式下的背景颜色,全屏模式的默认颜色为黑色

  • 举个栗子

HTML:

Hello World, and wish you have a good day!

CSS:
p:first-letter {
    font-size: 5em;
}

如果不创建一个元素,我们可以通过设置

:first-letter伪元素来为其添加样式。这个时候,看起来好像是创建了一个虚拟的元素并添加了样式,但实际上文档树中并不存在这个元素

6、完成一个需求

用CSS实现这个效果

用到了一些基本样式,实现代码可访问我的Github

7、更多资源与工具

  • CSS在线验证: http://codebeautify.org/cssvalidate (该网站上还有很多别的工具)
  • 学习CSS布局:http://learnlayout.com/
  • CSS基础教程:http://www.w3school.com.cn/css/index.asp
  • CSS3新特性(了解即可):http://www.w3school.com.cn/css3/
  • CodeForDream上提供的CSS课程:http://www.codefordream.com/courses/css_basic/sections

**我是半生不熟 喜欢照自己的怪念头行事
喜欢一切意外 想把生活过成诗的样子
若哪天有幸相遇 请别诧异 其实我并不是个乖孩子 **

你可能感兴趣的:(今天聊聊CSS)