CSS学习总结二

简介: 元素:输入框、文本框、单选项、复选框、下拉菜单、按钮

   接着上回的总结CSS总结一 有了下面的最后的总结!


第六章:CSS设置表格和表单的样式


 控制表格:


  标记:

    border(边框)

    Summary(概括内容)

    Caption(大标题)

    Caption-side(标题位置)

  颜色:

    Color(表格文字颜色)

    Background(表格背景颜色)

  边框:

    Bordercolor(边框颜色)

    Border-collapse(边框重叠)

 CSS与表单:


    元素:输入框、文本框、单选项、复选框、下拉菜单、按钮

    文字按钮:from、input标记(背景设置为透明、边框为0)


第七章:CSS设置页面和浏览器的元素


  超链接特效:


    动态超链接:<a href="网址">内容</a>

    Text-decoration:none(去掉下划线)


20151226215201530.png


  鼠标特效:


    Cursor:pointer(控制箭头)


20151226215220958.png


  页面滚动条:


    Scrollbar-base-color(滚动条基调颜色)


20151226215235870.png


第八章:CSS制作实用菜单


  List-style-type属性值以及显示效果


20151226215254108.png


  图片样式:

    将list-style-type属性值设置为none,然后修改<li>的背景色background实现

  菜单横竖转换:

    <li>中的float属性


第九章:CSS滤镜的应用


    标示符:filter

    类别:Alpha通道、模糊效果(Blur)、移动模糊(Motion Blur)、透明色(Chroma)、下落阴影(Drop Shadow)、对称变换(Flip)、光晕(Glow)、灰度(Grayscale)、反色(Invert)、遮罩(Mask)、阴影(Shadow)、X广效果(X-ray)、浮雕(Emboss、Engrave)’波浪(Wave)

    高级滤镜:渐隐变换(BlendTrans)、变换(RevealTrans)、灯光(Light)


第十章:CSS+DIV美化和布局


    块级(block-level)元素<div>标记和行内(inline elements)元素<span>标记

    盒子模型:内容(content)、边框(border)、间隙(padding)、间隔(margin)


20151226215315166.png


    Border-分离元素(color、width、style)

    Padding用于控制content与border之间的距离

    margin指元素与元素之间的距离


20151226215341121.png


    div的父子块关系:


20151226215352586.png


第十一章:CSS+DIV布局方法剖析


    DIV分块:页面(Banner)、主题内容(content)、菜单导航(links)、脚注(footer)


第十三章:CSS与JavaScript


  1.关于JavaScript的基础请单击我的博客:JavaScript学后总结

  2.这里一般说CSS是静态的样式,JavaScript是动态样式

  3.将JavaScript写到另一个文件夹中,通过在CSS中写<script src="文件名" language="javascript"></script>进而混合运用

  4.例如:用CSS设置了字体颜色,然后输入相应的值通过JavaScript动态改变其颜色.


第十四章:CSS与XML


  1.关于XML我当时的基础总结博客:XML初识总结

  2.XML和HTML一样,主要通过链接外部的CSS文件,来控制各个标记,在XML中通过以下方式来与CSS文件链接从而改变XML中文字的格式


<?xml version = "1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="CSS文件名称"?>
<!DOCTYPE hello[
<!ELEMENT hello (#PCDATA)>
]>


第十五章:CSS与Ajax


  1.Ajax技术提供了客户与服务器的异步通信的能力,用户请求返回的时候,通过JavaScript和CSS来实现局部更新,而不是刷新整个页面.

    Ajax涉及的技术:


20151226215412214.png


    Ajax中几个关键技术的配合:


20151226215427514.png


总结:


   总体来说,CSS在任何技术中扮演着页面美化师的位置,总结完之后,对它的理解更加深入,很期待在以后大量运用中更加深刻的理解.

相关文章
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
186 1
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
143 1
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法,包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作,并附有代码示例和运行结果图。
58 3
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
2月前
|
前端开发 JavaScript 算法
HTML/CSS/JavaScript基础学习day03-作业
本内容包含多个 JavaScript 编程示例,涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作,适合练习基础算法与逻辑思维。
84 5
|
3月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day01
阿铭学习HTML基础,包括VSCode快捷生成代码、常用标签如head、title、body、img、a、p等的使用,以及CSS选择器的优先级和基本样式设置,适合前端入门学习。
167 12
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习,包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图,帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容,强化知识点记忆。
67 2
|
3月前
|
XML 人工智能 前端开发
HTML/CSS/JavaScript基础学习day02
阿铭学习day02内容涵盖VSCode常用插件安装与配置,如中文语言包、路径提示、Vue开发工具等,同时介绍了通义灵码AI编程助手的使用方法,提升开发效率。
63 1
|
2月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识,包括函数定义、调用方式及参数使用,以及Array和String对象的常用操作。
81 0

热门文章

最新文章