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在任何技术中扮演着页面美化师的位置,总结完之后,对它的理解更加深入,很期待在以后大量运用中更加深刻的理解.

相关文章
|
XML 编解码 前端开发
css核心知识学习
css核心知识学习
67 0
|
5月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
40 4
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
3月前
|
前端开发
|
3月前
|
Web App开发 移动开发 自然语言处理
|
5月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
99 0
学习css的clip-path属性
|
5月前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
51 2
|
5月前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
37 1
|
7月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
246 0
|
7月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
94 0