zoukankan      html  css  js  c++  java
  • web学习笔记——CSS整理(一)

      今天开始学习CSS,一边看书,一边对着博客建立自己的学习笔记。

      CSS的概念,应该稍微记一下,是Cascading Style Sheet的缩写,可以翻译为“层叠样式表”或“级联样式表”,即是“样式表”。好的,概念的东西就到这里为止,接下来正式开始学习基本语法。

      CSS的基本语法:选择符 { 样式属性:取值; 样式属性:取值;}(记得要有分号)

      选择符被分为“类选择符”,“ID选择符”,“包含选择符”三种。

      话说我还不知道怎样正确去定义选择符,不过先照着书看吧。

      1,类选择符的语法是:标记名.类名{ 样式属性:取值;样式属性:取值;}

        书上说,其中的类名是类选择符,这是可以自己定义的名称。在实际应用中,还可以省去HTML的标记名。

        例如:p.red {color:red}可以写成:.red {color:red}

        三是与直接定义HTML中的标记样式不同的是:这段代码仅仅是定义了样式,并没有应用样式。如果要应用样式中的red类,还需要在正文中添加如下代码:

        <p class=red>

      2,ID选择符

        先学习一下什么是ID,我也不知道,不过书上写着:在HTML中,需要唯一标识一个元素时,就会赋予它一个ID标识,以便在对整个文档进行处理时能够很快地找到这个元素。而ID选择符则用来对这个单一元素定义单独的样式。其定义的方法与类选择符差不多,不过要把(.)改成(#),而在调用的时候把class换成ID。

        ID选择符的语法是:标记名#标识名 { 样式属性:取值; 样式属性:取值;}

        例如在页面中定义了一个ID为exam的元素,这里要设置这一元素的文字颜色为红色,那么只需要添加如下代码:

          #exam {color:#FF0000}

          <p id="exam">

      3,包含选择符

        包含选择符也称为i关联选择符,是对某种元素包含关系定义的样式表。这种方式仅仅对被包含在内的元素定义。例如:

          table a { font-size:12px }

          这段代码只对在表格内的链接文字有效,设定了文字大小为12像素,而对于表格之外的链接文字不起作用。

      然后就是添加CSS的方法。按照功能区分,分别是:链入外部样式表,内部样式表,导入外部样式表,和内嵌样式共四种!没的偷懒,接下来还是要一个个地看:

      1,链入外部样式表

        链入外部样式表是把样式表单独保存为一个文件,然后在页面中用<link>标记链接,而这个<link>标记必须放到<head>里面去。

          基本语法:<link rel="stylesheet" type="text/css" href="样式表文件的地址">

        在该语法中,浏览器从样式表文件中以文档格式读出定义的样式表。rel=“stylesheet”是指在页面中使用的是外部样式表;type=“text/css”是指文件的类型是样式表文本;href参数则用来设定文件的地址,可以为绝对地址或相对地址。

        样式表文件保存为.css,其内容就是定义的样式,不包含HTML标记。

      2,内部样式表

        内部样式表是把样式表的内容直接放到页面里面 的<head>区域里,通过<style>标记插入。

        基本语法:

          <style type="text/css">

            选择符 { 样式属性:取值; 样式属性:取值;……}

            选择符 { 样式属性:取值; 样式属性:取值;……}

          </style>

      3,导入外部样式表

        导入外部样式表是指在内部样式表的<style>区域里引用一个外部的样式表文件,导入时需要使用@import声明。

        基本语法:

          <style type="text/css">

            @import url(样式表的地址)

            选择符 { 样式属性:取值; 样式属性:取值;……}

            选择符 { 样式属性:取值; 样式属性:取值;……}

          </style>

       4,内嵌样式

        内嵌样式是混合在HTML标记里使用的,用这种方法可以很直观地对某个元素直接定义样式。内嵌央视的使用是直接在HTML标记里面加入<style>参数,在<style>参数里面的内容就是CSS的属性和属性值。

        基本语法:

          <HTML标记 style=“样式属性:取值; 样式属性“取值;……”>

        唔……貌似这样看来,HTML语言里面的style参数其实全都是CSS咯……

      接下来的东西就简单了,简单提提就可以了:

      设置字体——font-family

      设置字号——font-size

      字体风格——font-style

      设置加粗字体——font-weight

      小型的大写字母——font-variant

      复合属性:字体——font

      背景颜色——background-color

      背景图像——background-image

      背景重复——background-repeat

      背景附件——background-attachment

      背景位置——background-position

      复合属性:背景——background

      单词间隔——word-spacing

      字符间隔——letter-spacing

      文字修饰——text-decoration

      纵向排列——vertical-align

      文本转换——text-transform

      文本排列——text-align

      文本缩进——text-indent

      文本行高——line-height

      处理空白——white-space

      文本反排——unicode-bidi与direction(基本不用)

      顶端边距——margin-top

      其他边距离——margin-bottom,margin-left,margin-right

      复合属性:边距——margin

      顶端填充——padding-top

      其他填充——padding-bottom,padding-right,padding-left

      复合属性:填充——padding

      边框样式——border-style

      边框宽度——border-width

      边框颜色——border-color

      边框属性——border

      定位方式——position

      元素位置——top,right,bottom,left

      层叠——z-index

      浮动属性——float

      清除属性——clear

      可视区域——clip

      设定大小——width,height

      超出范围——overflow

      可见属性——visibilty

      列表属性——list-style-type

      图像符号——list-style-image

      列表缩进——list-style-position

      复合属性:列表——list-style

      光标属性——cursor

      不透明度——alpha

      动感模糊——blur

      对颜色进行透明处理——chroma

      设置阴影——dropShadow

      对象的翻转——flipH,flipV

      发光效果——glow

      灰度处理——gray  

      反相——invert

      X光片效果——xray

      遮光效果——mask

      波形滤镜——wave

      好的,到这里,《HTML网页设计手册》这本书的关于CSS的内容我都记录完了,虽然远远还没有上手,但对CSS已经基本认识了一遍,知道它是怎么工作以及怎么跟HTML结合工作的。写这篇博客的目的已经达到,接下来我会着手做我的项目二,并且一边学习PHP。学习愉快!

  • 相关阅读:
    POJ测试数据合集
    POJ1724ROADS
    关闭进程的数据库
    config上传设置
    tfs 撤销挂起的更改
    cn_visual_studio_team_foundation_server_2010_x86_x64_dvd_531909
    js 中文转义
    文件下载乱码
    杀死数据库进程
    Python基础综合练习
  • 原文地址:https://www.cnblogs.com/prettylove/p/3606919.html
Copyright © 2011-2022 走看看