一、理解web标准含义--为什么采用web标准
*****将内容与样式分离
1、web标准是一系列标准,就是一系列技术标准
在使用时,是组合应用
【1】、结构化内容 html
【2】、表现化内容 css
【3】、行为化内容 JavaScript
2、网页开发的小工具--火狐浏览器中的firebug
工具--附加组件--搜索firebug
作为web前端工作,要兼容的浏览器ie,火狐浏览器,谷歌刘浏览器,苹果浏览器等。
网页是否有css样式,测试--在浏览器改变文字大小。
3、css定义技巧:
【1】、为了将来的css代码优化,建议所有的属性值后面都要带上“;”
【2】、某些html标签有自己默认的css属性值,
例如h1标签就有自己的属性值,自动就是加粗显示,字号比较大。
【3】、为了兼容主流浏览器,为统一,建议我们在设置时,将所有元素的css属性重置为标准的。
【4】、不同的浏览器,有各自不容的css属性值--要命的就是浏览器的兼容。
【5】、有一个比较特殊的字体想用怎么办?--将其转化为图片。(css3中可以通过@font-face

自定义字体)
分中英文字体。设置字体的顺序,将英文字体设置在前,中文在后。
【6】、css编辑工具--用什么都行,高手,用树叶杀人。
【7】、想让文字在垂直方向上居中,将行高设置为元素的高度,行高=元素高度
【8】、css可以重新设置,html标签的默认样式。
4、css应用给网页的方式:就相当于给人怎么去穿上衣服。
【1】、行内样式:应用于一个。
【2】、嵌入样式:应用于一类标签。
【3】、如果我们有很多的网页,都要用css,将这些css写到一个独立文件中,这个就是外链式(推荐使用)。
【4】、导入式样式:也是将样式写到一个文件中,再倒入到网页中。
*****说明,导入式,其实与内嵌式是相类似的,都是将样式加入到网页里。
1、导入式会占用html文件空间
2、有些浏览器解析会有问题。浏览器会最后读取@import中的内容
3、将多个样式文件,导入到一个样式文件中。

二、css的特性
css叫层叠样式表。
1、继承:子元素会继承父元素的某些样式。
【因为有些子元素本身就有默认值,所以他就不用父元素】
2、叠层:子元素如果定义了与父元素相同的样式,会覆盖掉父元素的样式。
*****后面的样式会覆盖前面的样式

三、css样式的优先权:当样式有冲突时,听谁?(可以用!important提高其优先权)
css优先权:就近原则
作用范围越小,优先权越高。
离要修饰目标越近的样式优先权越高。

爷爷--红
爸爸--绿
孩子--蓝
选择优先权
行内>id>class>标签选择符
特殊情况,我们可以提升某个属性的权限
*****IEtest工具,也有一个兼容性问题,在win7下打不开ie6.--下载绿色版ie6。不用安装直接用哪种版本。

四、常用的一些文字,文本控制的css样式
*****我们在应用css样式时,一定要注意它的默认值。因为不同的浏览器它的css默认值是不同的(不同的属性浏览

器支持是不一样的,我们还要保证我们网页的兼容性,尽量使用通过的属性,不用存在兼容性差别的属性。)

五、css控制元素的某种状态--伪类
伪类语法:
元素名称:伪类名称{属性:值}
例如:超链接的鼠标经过状态

a:hover{text-decoration:underline;}

*****如果,鼠标放上效果不起作用,请修改连接状态的顺序 L-V-H-A

Html/Css(新手入门第一篇)的更多相关文章

  1. Html/Css(新手入门第二篇)

    一.在实际工作中,都是一个团队在做项目,不是一个人在工作.多人协作,就是每个团队都有自己 的命名习惯.1.css选择符命名,规范.2.都有命名规范文档. 二.css选择符作用:指定css样式所作用对象 ...

  2. ElasticSearch入门 第一篇:Windows下安装ElasticSearch

    这是ElasticSearch 2.4 版本系列的第一篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...

  3. 《IM开发新手入门一篇就够:从零开发移动端IM》

        登录 立即注册 TCP/IP详解 资讯 动态 社区 技术精选 首页   即时通讯网›专项技术区›IM开发新手入门一篇就够:从零开发移动端IM   帖子 打赏 分享 发表评论162     想开 ...

  4. Flink入门-第一篇:Flink基础概念以及竞品对比

    Flink入门-第一篇:Flink基础概念以及竞品对比 Flink介绍 截止2021年10月Flink最新的稳定版本已经发展到1.14.0 Flink起源于一个名为Stratosphere的研究项目主 ...

  5. 【原创】新手入门一篇就够:从零开发移动端IM

    一.前言 IM发展至今,已是非常重要的互联网应用形态之一,尤其移动互联网时代,它正以无与论比的优势降低了沟通成本和沟通代价,对各种应用形态产生了深远影响. 做为IM开发者或即将成为IM开发者的技术人员 ...

  6. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  7. Zookeeper 入门第一篇

    转载原文地址: ZooKeeper学习总结 第一篇:ZooKeeper快速入门 ZooKeeper学习总结 第二篇:ZooKeeper深入探讨 ZooKeeper学习第一期---Zookeeper简单 ...

  8. JavaMail入门第一篇 邮件简介及API概述

    现如今,电子邮件在我们的生活当中扮演着越来越重要的角色,我们每个人几乎都会与其打交道(至少时不时我们都会接收到莫名其妙的垃圾邮件),在工作中,使用邮件进行交流沟通,可以使我们的工作有迹可循,也显的较为 ...

  9. flask入门第一篇

    一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不 ...

随机推荐

  1. ios 屏幕概况

    转:http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

  2. 65. Reverse Integer && Palindrome Number

    Reverse Integer Reverse digits of an integer. Example1: x =  123, return  321 Example2: x = -123, re ...

  3. Spark SQL External Data Sources JDBC简易实现

    在spark1.2版本中最令我期待的功能是External Data Sources,通过该API可以直接将External Data Sources注册成一个临时表,该表可以和已经存在的表等通过sq ...

  4. ORACLE 10G 闪回建议

    Flashback Tips The following tips and restrictions apply to using flashback features. Flashback Tips ...

  5. MoleHill Getting Started AGAL(转)

    1.The OpCode This is what AGAL looks like: //vertex shader m44 op, va0, vc0 // pos to clipspace mov ...

  6. MVC 自定义IModelBinder实现json参数转Dictionary<string, string>

    IModelBinder的学习不算深入,现在用它来实现一个json转Dictionary<string, string> 一.原始json转Dictionary<string, st ...

  7. C++学习基础三——迭代器基础

    迭代器分为两种:一种是iterator,另一种是const_iterator.两者都可进行访问容器中的元素,不同之处是:(1)const_iterator类型只能用于读取容器内的元素,不能更改其值:而 ...

  8. PIC32MZ tutorial -- Watchdog Timer

    Watchdog is a very necessary module for embedded system. Someone said that embedded system operates ...

  9. SQL笔记-第四章,数据的检索

    一.select的简单用法 1.简单的数据检索 SELECT * FROM T_Employee; 2.检索出需要的列 SELECT FNumber,FName,FAge FROM T_Employe ...

  10. 使用虚幻引擎中的C++导论(二-UE4基类)

    使用虚幻引擎中的C++导论(二) 第一,这篇是我翻译的虚幻4官网的新手编程教程,原文传送门,有的翻译不太好,但大体意思差不多,请支持我O(∩_∩)O谢谢. 第二,某些细节操作,这篇文章省略了,如果有不 ...