一、理解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. Codeforces 719E [斐波那契区间操作][矩阵快速幂][线段树区间更新]

    /* 题意:给定一个长度为n的序列a. 两种操作: 1.给定区间l r 加上某个数x. 2.查询区间l r sigma(fib(ai)) fib代表斐波那契数列. 思路: 1.矩阵操作,由矩阵快速幂求 ...

  2. Sql语句查看表结构

    快速查看表对的就说明,及表字段描述及字段类型 --表描述 SELECT tbs.name 表名,ds.value 描述 FROM sys.extended_properties ds LEFT JOI ...

  3. strong & weak

    Here is a quick summary: A strong reference will keep the object it points to from being deallocated ...

  4. sql语句Group By用法-转载

    sql语句Group By用法一则 2007-10-25 12:00 sql语句Group By用法一则 如果我们的需求变成是要算出每一间店 (store_name) 的营业额 (sales),那怎么 ...

  5. The listener supports no services解决一例

    The listener supports no services解决一例   Listener动态监听静态监听注册实例 今天做Advacned Replication实验的时候碰到一个问题,启动目标 ...

  6. C#中的 正则表达式

    String 类包括许多字符串搜索和替换方法,当你要在较大字符串中定位文本字符串时,可以使用这些方法. 当你希望在较大字符串中定位若干子字符串之一时,或者当你希望在字符串中标识模式时,正则表达式最有用 ...

  7. COOKIE&&SESSION

    ---------------------------------------------------------------------------COOKIE------------------- ...

  8. 项目名 的在JSP或JAVA中的另类写法

    在JSP页面中${pageContext.request.contextPath } 表示项目名<form action="${pageContext.request.contextP ...

  9. JAVA编程规则【转自java编程思想】

    本附录包含了大量有用的建议,帮助大家进行低级程序设计,并提供了代码编写的一般性指导: (1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符,其中包含的所有单词都应紧靠在 ...

  10. json 拼接多个对象

    var json = {}; var json1 = {a:1,b:1}; var json2 = {c:1,d:1}; json = eval('('+(JSON.stringify(json1)+ ...