• Web前端之初学CSS


          第一次写博客园,不知道说些什么,就随笔写点吧。初出茅庐,不知不觉中,从刚开始的简单Html到现在的CSS,一路走来,虽然时间不长,但学到了很多新的知识,首先感谢教导我们的老师辛苦培育;在以往的记忆力中,web前端是陌生的,甚至根本没有这个概念,对我来说,“程序员”是我对编程的第一映像,映像中,它是很难学的,映像中,视乎跟很多东西有联系,比如数学、英语、强悍的逻辑能力还有扎实的编程基础等等,到底从哪学啊!!

          好在这次能有机会接触并开始慢慢掌握这方面的内容,虽然后面的路还很长很长,但我相信既然开始了,就要坚持走完,虽然最后的结果不一定让人满意,但总比没结果强吧!没有绝对的完美,确可以让我走的更远,就直接开门见山吧。

          今天主要学习了CSS基础,它的优点,样式规则、选择器(部分)。

        一、优点:1)可提高页面浏览速度,比以往的图片试页面快的多,能节省50%以上的文件尺寸,降低维护费用,设计起来省时省力。

                     2)能更好的控制页面布局,结合CSS和Div元素,比传统的table元素更好的控制页面布局。

                     3) 实现表现和结构、内容相分离,提高编写页面中的效率和降低容错率。

                     4)能更好更方便搜索引擎的搜索。

        二、语法规则(部分)

    1、外部样式:把定义好的样式放在单独的一个文件中,如果需要便可以在文档中引用;相当于把样式打包放在一个地方,随时可以调用定义好的样式。

    示例:在web文档的<head>段使用<link>标记,用于链接样式表的<link>标记语法:<link rel="stylesheet" type="text/css" href="css/style.css">(蓝色部分为样式表的链接)。

    2、嵌入式:通常在web表中的<style>元素中设置</style>。切作用范围仅限于改网页。

    3、内联样式:在指定的style属性内设定显示样式,通常在<body>当中</body>

        三、选择器(部分)

    1、*号,为全局选择器,可以匹配任意元素类型名,可以讲整个页面定义样式。

    2、H1 EM { color: blue },派生选择器。形象的说 前辈与后代的关系。即只要定义了H1的样式,那么它后面的样式也跟着变化。

    3、H1 EM > P { line-height: 1.3 } 子选择器。形象的说 父与子的关系。(效果其实同派生选择器)。

    4、id选择器依赖于#号, id是不能重复定义的,只是在一些比较关键的元素上,可以定义多个,但定义的名字不能相同。

    5、. 号,类选择器class, 该选择器可以被重复定义。

    6、h1+h2 相邻同胞选择器形象的说,兄弟选择器),向后寻找切一定是相邻的那一个。

    7、伪元素和伪类:

    1)伪类选择器first-child;效果为 匹配一个任意元素的第一个子元素的样式。以下为范例:即 选中ol中所有的li,然后找到第一个儿子(子节点)

    ol li:first-child{background-color: red;}

    ol li:last-child{background-color: blue;}

    2)链接伪类link、visited、hoveractivefocus(蓝色的为动态伪类)

               link:为设置一个未被访问的链接的样式。

               visited:为设置一个被访问的链接的样式。

               hover:为设置鼠标悬停在当前元素上时的样式。

               active:设置鼠标在元素上按下时的样式。

               focus:当前的元素获得焦点时的样式。(比如当选中当前文本框,且光标在文本框内闪烁的时候即为当前焦点)

    8、first-line 伪元素选中文本中的第一行内容进行样式设定。

    9、first-letter伪元素选中当前段落中第一个字符进行样式设定。

  • 相关阅读:
    hibernate注解note
    hibernate的批量删除
    hibernate实现多表联合查询
    hibernate联合主键注解方式
    jsp之radio取值与赋值
    @Transient注解的使用
    工程师如何在工作中提升自己?(公众号)
    HTML中让表单input等文本框为只读不可编辑的方法
    ajax, jQuery, jQueryeasyUI
    关于easyui的问答(来自百度问答)
  • 原文地址:https://www.cnblogs.com/lovhmq520/p/3639350.html
Copyright © 2020-2023  润新知