CSS入门学习(转)

一、基础学习

       1、何为CSS

          CSS是Cascading Style Sheets(层叠样式表)的简称,是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语 言).   

          CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀, 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以 她是每一个网页设计人员的必修课。

       2、语法

          2.1引用

               链接式(href

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <head>  
  2.     <link rel="stylesheet" type="text/css" href="http://www.dreamdu.com/style.css" />  
  3. </head>  
               href -- 指定需要加载的资源(CSS文件)的地址URI 
               rel -- 指定链接类型 
               type -- 包含内容的类型,一般使用type="text/css"

               导入样式(@import

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <head>  
  2.     <style type="text/css">@import url(http://www.dreamdu.com/style.css);</style>  
  3. </head>     

               内嵌式

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <style type="text/css">  
  2. /* ----------文字样式开始---------- */  
  3.   
  4. /* 梦之都白色12象素文字 */  
  5. .dreamduwhite12px   
  6. {   
  7.     color:white;   
  8.     font-size:12px;   
  9. }  
  10. /* 梦之都黑色16象素文字 */  
  11. .dreamdublack16px   
  12. {   
  13.     color:black;   
  14.     font-size:16px;   
  15. }  
  16.   
  17. /* ----------文字样式结束---------- */  
  18. </style>  

               注意:style标签应该在head标签内部.


               行内样式

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <p style="font-size: 10px; color: #FFFFFF;">  
  2.     使用CSS内联引用表现段落.  
  3. </p>  
               把CSS样式直接作用在XHTML标签中.

         2.2选择器

               CSS选择器就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.

               标签选择器

               

              类别选择器

                 

              ID选择器

                 

               实例总结

id与class选择符在CSS与XHTML中的用法总结

 

CSS中的写法

XHTML中的写法

标签选择符

p{font-size:12px;}

<p>www.dreamdu.com</p>

id选择符

#id_selector{font-size:12px;}

<p id="id_selector">梦之都</p>

class选择符

.class_selector{font-size:12px;}

<p class="class_selector">梦之都</p>


       3、优点

          内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了. 

          使用CSS可以减少网页的代码量,增加网页的浏览速度


二、总结

       1、导图


       2、难点剖析

          2.1外部引用CSS中 链接式(link)与导入样式(@import)的区别

          (1)所属类别不同。

                   link属于XHTML标签,而@import完全是CSS提供的一种方式。
                   link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
          (2)加载顺序的差别。

                   当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
          (3)兼容性的差别。

                   由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
          (4)使用dom控制样式时的差别。

                   当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

          2.2表格与表单的区别

          表格用于布局,表单用来传输数据,在表格里面可以包含表单,在表单里面也可以包含表格,用表格来布局表单里面的数据,

          如果你有数据提供给后台程序,比如一个输入框,文本框等,这些元素通常要放到一个表单,这样才可以完成数据的提交。

       3、小编寄语

          CSS主要是用来控制网页显示的样式。通过CSS可以让HTML里的内容展现出绚丽的效果,就好比给一个人化妆,用的恰当,效果就好。

          本文只是对CSS一些简单的内容作了一下整理,至于其他强大的功能还需要我们继续探索,在以后的学习中逐渐深入。


转载于:https://www.cnblogs.com/yefengCrazy/p/5636702.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在电脑上显示未知发布者怎么办_电脑开机后显示器黑屏只有鼠标能动,怎么办呢?...

开机黑屏进不了系统是很常见的电脑故障&#xff0c;导致该现象的原因也有很多种&#xff0c;有些用户是电脑开机后显示器黑屏只有鼠标能动&#xff0c;如果是这种情况该怎么办呢&#xff1f;出现电脑开机后显示器黑屏只有鼠标很有可能是资源管理器的问题&#xff0c;下面由维度…

ios图文详情加载html_前端项目009 Vue 信息分享系统 商品列表、详情

頔言頔语&#xff1a;进步&#xff0c;一定要进步&#xff0c;进步是跟收入持平的本钱。01 商品列表0101 路由配置和数据请求0102 上拉加载更多02 商品详情0201 详情数据请求和展示0202 轮播图组件提取0203 商品详情&#xff08;路由的本质理解&#xff09;01 商品列表0101 路由…

zemax设置 像方远心_ZEMAX相机标定非常不完全指南

ZEMAX是广为使用的一款光学仿真软件&#xff0c;是进行光路设计和分析的利器&#xff1b;而相机标定&#xff0c;则是进行机器视觉任务时&#xff0c;拿到一款相机&#xff0c;对其实际参数进行确定的过程。因此看起来&#xff0c;二者其实主要是针对不同的侧重点。前者主要面向…

activiti 生命周期_一文让你读懂什么是Activiti工作流

Activiti工作流学习经验总结(一)什么是工作流&#xff1f;工作流指通过计算机对业务流程进行自动化管理&#xff0c;实现多个参与者按照预定义的流程去自动执行业务流程。什么是Activiti&#xff1f;Activiti 是一个开源架构的工作流引擎&#xff0c;基于bpmn2.0 标准进行流程定…

关于hkcmd.exe造成的和Eclipse之间热键冲突

可能是自己新买的笔记本比较强大,显卡也比较牛叉.当使用一些常用的Eclipse快捷键的时候Eclipse本身没有反应,反而显示器有了反应. 经常用的Eclispse中的快捷键CtrlAlt↑ 和CtrlAlt↓ 造成显示器内容的上翻转和下翻转 解决方式: 下载Windows Hot Key Explore 软件 在安装启动后…

中对曲线进行斜率提取_Au中的EQ处理方法——图形均衡器和参数均衡器

之前的文章详细讲过使用Cubase进行EQ处理&#xff0c;其实如果只是要对录音进行混音修音的话&#xff0c;使用Au也可以&#xff0c;Adobe Audition作为音乐录制及后期软件&#xff0c;具有很强大的后期功能&#xff0c;而且也可以添加插件&#xff0c;是修音混音非常好的工具。…

2 数据源配置_Spring, MyBatis 多数据源的配置和管理

作者&#xff1a;digdeep出处&#xff1a;https://www.cnblogs.com/digdeep/p/4512368.html热门推荐vuewebsocketSpringboot实现的即时通信开源项目springboot炸翔版CMS开源系统同一个项目有时会涉及到多个数据库&#xff0c;也就是多数据源。多数据源又可以分为两种情况&#…

(九十)使用多个storyboard+代码实现控制器的分开管理

使用单个storyboard会使得项目难与管理&#xff0c;使用纯代码又会过于麻烦&#xff0c;因此如果能将二者结合起来&#xff0c;并且使用多个storyboard&#xff0c;会使得项目简单简单、方便许多。 下面以一个简单的视图关系为例&#xff0c;介绍多个storyboard的用法。 ①有pa…

吗 支持windows_M1能否原生支持Windows 苹果把问题抛给了微软

关于苹果M1处理器近期已经有了非常多的报道&#xff0c;人们对其出色的性能表现以及较低的功耗还是充满了期待。那么最后一个也是最重要的一个问题&#xff0c;基于苹果M1处理器的电脑能原生支持微软Windows吗&#xff1f;毕竟很多人买回苹果MacBook第一件事就是安装Windows 10…

4怎么放大字体_win8.1系统如何放大所有字体?

电脑安装上[color#070c0 !important]win8.1正式版系统&#xff0c;发现桌面的字体和网页的字体比较小&#xff0c;看起来比较吃力&#xff0c;从而影响操作。一般win8.1系统字体都默认设置好的&#xff0c;不过用户可以进行放大&#xff0c;那么win8.1系统怎么放大所有字体&…

进程 zabbix_Zabbix监控在windows的进程(非进程数)

场景介绍&#xff1a;小Z同学最近遇到个项目需求&#xff0c;需求是用zabbix监控运行在windows的进程。然鹅&#xff0c;当小Z同学在网上搜了一大堆&#xff0c;发现基本上都是使用官方的proc.num(***.exe)键值拿到进程数量&#xff0c;很显然&#xff0c;这并不符合客户实际的…

phpcms文件所需权限

转载于:https://www.cnblogs.com/zhongheng/p/4684087.html

python mysql 时间比较大小_python时间函数与mysql时间函数转换

时间相关操作&#xff0c;时间有三种表示方式&#xff1a;时间戳 1970年1月1日之后的秒&#xff0c;即&#xff1a;time.time()格式化的字符串 2014-11-11 11:11&#xff0c; 即&#xff1a;time.strftime(%Y-%m-%d)结构化时间 元组包含了&#x…

mysql npe问题_MySQL为Null会导致5个问题,个个致命!

本文转载自微信公众号「Java中文社群」&#xff0c;作者磊哥。转载本文请联系Java中文社群公众号。正式开始之前&#xff0c;我们先来看下 MySQL 服务器的配置和版本号信息&#xff0c;如下图所示&#xff1a;“兵马未动粮草先行”&#xff0c;看完了相关的配置之后&#xff0c…

数据结构导论(一)

导读&#xff1a;在看书前&#xff0c;我对这本书的内容&#xff0c;是 这么想的&#xff1a;数据结构&#xff0c;那大概就是关于数据和结构的东西。而讲到数据&#xff0c;估计会说到数据类型&#xff0c;数据定义&#xff0c;数据存储等方面。然后在结构方面&#xff0c;就不…

基于java的汽车维修保养智能预约系统论文

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…

mysql 日志同步 数据不同步_Mysql互为主从问题--日志同步数据不同步

Mysql互为主从问题--日志同步数据不同步我搭建的是mysql互为主从 复制两台机器的mysql环境完全相同第一部分测试&#xff1a;B为master A为slave的同步测试在B上创建表lian&#xff0c;并插入数据mysql> create table lian (a int,b char(10));mysql> insert into lian (…

UVALive 4764 dp

DES: 这是一个新的游戏。给你一套牌、编号从1到100000.正常来说。你手中的牌和这次翻的牌是一样的&#xff0c;就会加一分。但是。如果是999的话。加三分。所以问你最大的分是多少。 貌似是简单的DP吧。&#xff08;DP菜鸟...再简单我也不会...T_T...&#xff09;于是...我看懂…

mysql数据库事务命令_MySql学习18----数据库事务---命令使用(02)

本篇讲述数据库中非常重要的事务概念和如何使用MySQL命令行窗口来进行数据库的事务操作。下一篇会讲述如何使用JDBC进行数据库的事务操作。事务是指数据库中的一组逻辑操作&#xff0c;这个操作的特点就是在该组逻辑中&#xff0c;所有的操作要么全部成功&#xff0c;要么全部失…

sequelize连接mysql_Sequelize没有连接mysql

文件config / config.json{"development": {"username": "root","password": null,"database": "example","host": "example.sqlite","dialect": "sqlite"},"stage…