CSS相关知识

zhou.xingbo

浏览: 53146 次
性别:
来自: 北京

最近访客更多访客>>

umbrellall1

chqs

driftstory

w85988233

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

应用

CSS Gmail Spring HTML

1. CSS是一种为结构化文档添加样式的计算机语言

使用场景1：一种样式重复使用。Do not Repeat Yourself.

使用场景2：简化网页设计

如：

<style type="text/css">
p {
text-align:center;
}
p.red {
color:red;
font-size:24px
}
p.purple {
color:purple;
font-size:18px
}
p.blue {
color:blue;
font-size:12px
}
p.left {
text-align:left;
}
</style>

<p class="red">It was the best of times, it was the worst of times,</p>

<p class="purple">it was the age of wisdom, it was the age of foolishness,</p>
<p class="blue">it was the epoch of belief, it was the epoch of incredulity</p>
<p class="blue">it was the season of Light, it was the season of Darkness,</p>
<p class="purple">it was the spring of hope, it was the winter of despair,</p> 
<p class="red">we had everything before us, we had nothing before us,</p>

<p class="red">we were all going direct to Heaven, we were all going direct the other way</p>
<p class="purple">in short, the period was so far like the present period,</p>
<p class="blue">that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only. </p>
<p class="left">-- Charles Dickens</p>

做成一个外部链接

CSS为什么叫做层叠样式表，对样式的设定可以是多层的，而究竟采用哪一层采用就近原则。

2. CSS与DIV

内联样式

<body>
<h1 style="font-size:12pt;color:blue">A robot may not injure a human being or, through inaction, allow a human being to come to harm.
</h1>
</body>

嵌入样式

<head>
<style type="text/css">
h1 {font-family:宋体;font-size:12pt;color:blue}
</style>

</head>
<body>
<h1>A robot must obey orders given it by human beings except where such orders would conflict with the First Law.</h1>
</body>

外联样式(推荐)

<link rel="stylesheet" href="h1.css" type="text/css">
</head>
<body><h1>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law. <head></h1></body>

h1.css

h1 {font-family:宋体;font-size:12pt;color:blue}

CSS语句格式

选择符{属性：值} 如： p {font-size:16}

html选择符

class选择符，如：

<head>
<style type="text/css">
.center {text-align:center;color:blue}
</style>
</head>
<body>
<h1 class="center">The Creation of Éa</h1>

<pre class="center">
Only in silence the word,
only in dark the light,
only in dying life:
bright the hawk's flight on the empty sky.
</pre>
</body

ID选择符，如：

<head>

<style type="text/css">
#title{text-align:center;color:blue}
</style>
</head>
<body>
<p id="title">To the time to life, rather than to life in time </p>
</body>

包含选择符，如：

<head>
<style type="text/css">b
table  p{font-size:20;color:red}
</style>
</head>
<body>
<table>
<tr><td><p>The Childhood Of Humankind Ends</p></td></tr>

</table>
<p>The Childhood Of Humankind Ends</p>
</body>

组合选择符，如：

<style type="text/css">
h1,h2,h3{color:red}
</style>

DIV--层布局

传统的网页布局是用表格（table）来做的，整张网页其实就是一个大的嵌套的表格：简陋网页用表格来做布局还是相当方便的，不过当网页内容多起来，表格的嵌套会变的非常复杂。

另外一种常用方法是采用div，也就是层，来进行网页布局。

首先是页面作为最底层，放上一层背景，在背景上建立一个新层，放上logo，header，sidedar，foot，content几个块，在每个块上根据需要继续建立层。

这种方式非常自然，做起来也像搭积木一样流畅。

例子：

1 html

<html>
<head>
<title>Yeats</title>

<style type="text/css" media="screen">

</style>
</head>
<body>
<h1>When You Are Old</h1>
<pre>
When you are old and grey and full of sleep,
And nodding by the fire, take down this book,
And slowly read, and dream of the soft look
Your eyes had once, and of their shadows deep;
How many loved your moments of glad grace,
And loved your beauty with love false or true,
But one man loved the pilgrim Soul in you,
And loved the sorrows of your changing face;
And bending down beside the glowing bars,
Murmur, a little sadly, how Love fled
And paced upon the mountains overhead
And hid his face amid a crowd of stars.
</pre>

<hr>
<a href="mailto:renw1990@gmail.com">My Email</a>
</body>
</html>

2 css

body {font-size:20px;margin:0px;text-align:center}

#container {width:100%}

#header {
width:800px;
margin:0 auto;
height:100px;
background-color:green;
}

#mainbody {
width:800px;
height:400px;
margin:0 auto;
}

#sidebar {
float:left;
width:200px;
height:400px;
background-color:orange;
}

#content {
float:right;
width:600px;
height:400px;
color:white;
background-color:black;
}

#foot {
margin:0 auto;
height:100px;
width:800px;
background-color:yellow;
}

3 div

<div id="container">
  <div id="header">
    <h1>When You Are Old</h1>      
  </div>
  <div id="mainbody">

    <div id="sidebar">
      <p><br><br>index</p>
      <p>download</p>
      <p>William Yeats</p>

      <p>Contact Me</p>
    </div>
    <div id="content">
      <pre>


        When you are old and grey and full of sleep,
        And nodding by the fire, take down this book,
        And slowly read, and dream of the soft look
        Your eyes had once, and of their shadows deep;
        How many loved your moments of glad grace,
        And loved your beauty with love false or true,
        But one man loved the pilgrim Soul in you,
        And loved the sorrows of your changing face;
        And bending down beside the glowing bars,
        Murmur, a little sadly, how Love fled
        And paced upon the mountains overhead
        And hid his face amid a crowd of stars.
      </pre>

    </div>
  </div>
  <div id="foot">
    <hr>      
    <a href="mailto:renw1990@gmail.com">My Email</a>
  </div>

</div>

ps：

http://www.w3school.com.cn/

http://www.csszengarden.com/tr/chinese/

分享到：

ruby | Mysql相关知识

2011-04-22 16:02
浏览 743
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

毕业设计-线性规划模型Python代码.rar: 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、本项目仅用作交流学习参考，请切勿用于商业用途。

调用百度云API，基于python的微博评论情感偏向分析: DATA: 可供参考的微博评论数据。详见 /DATA/weibocommennts.csv CODE: apiGetSheet.py 调用百度API 获得微博评论对应文字的情感得分， sheetGetvalue.py 根据情感得分进行标准化，获得实际倾向。

基于ssm的高速公路收费系统源代码（完整前后端+mysql+说明文档+LW）.zip: 管理员管理员信息管理负责人管理员工信息管理公告信息管理小型车收费标准设置（元/每公里）大卡车收费标准设置(元/吨公里) 收费信息统计，统计小车和卡车收费，按月统计负责人个人资料修改公告查看小车收费统计（某员工某月统计）大卡车收费统计（某员工某月统计）员工个人资料修改公告查看小型车收费登记（车牌号，车辆照片，行使公里数，收费金额，收费日期，收费员，按公里数可以自动计算费用收费金额=收费标准*公里数）大卡车金额设置(每吨/元)（车牌号，车辆照片，行使公里数，吨，收费金额，收费日期，收费员，收费金额=收费标准*吨*公里数）环境说明：开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 服务器：tomcat7

Zabbix是一款开源的监控工具，用于实时监控IT基础设施，包括网络、服务器和应用程序它通过触发器和告警机制帮助及时发现并响应问题，同时提供数据可视化和报告功能，以优化性能和确保系统安全: 本套zabbix是基于6.0版本部署，内容涵盖zabbix的简介、zabbix server安装、zabbix基本概念、快速入门、zabbix进阶、zabbix实践、zabbix的高级监控使用。 =======知识领域网络监控：监控网络设备、服务器和应用程序的运行状态。系统监控：监控服务器性能，如CPU使用率、内存使用情况、网络流量等。数据库监控：监控数据库性能和状态。应用程序监控：监控应用程序的运行情况和性能指标。云监控：监控云服务和虚拟机的健康状况

商品库存管理系统课程设计报告.docx: 商品库存管理系统课程设计报告.docx

嘉兴智能卫浴项目建议书.docx: 嘉兴智能卫浴项目建议书.docx

Java系统源码+夕阳红公寓管理系统: Java系统源码+夕阳红公寓管理系统内容概要：本资源包含了完整的Java前后端源码及说明文档，适用于想要快速搭建并部署Java Web应用程序的开发者、学习者。技术栈：后端：Java生态系统，包含Spring Boot、Shiro、MyBatis等，数据库使用Mysql 前端：Vue、Bootstrap、Jquery等适用场景示例： 1、毕业生希望快速启动一个新的Java Web应用程序。 2、团队寻找一个稳定的模板来加速产品开发周期。 3、教育机构或个人学习者用于教学目的或自学练习。 4、创业公司需要一个可以立即投入使用的MVP（最小可行产品）。

基于ssm的新闻发布及管理系统源代码（完整前后端+mysql+说明文档+LW）.zip: （1）用户管理：用户注册：新用户注册用户登录：新用户登录找回密码：忘记密码找回密码用户评论：发表对新闻的评论（2）管理员管理：系统账号管理：管理员管理系统现有账号，进行删除停用等操作系统公告管理：系统公告的发布和删除新闻栏目管理：新闻栏目的新增和删除 ...

Java系统源码+计算机学院校友网: Java系统源码+计算机学院校友网内容概要：本资源包含了完整的Java前后端源码及说明文档，适用于想要快速搭建并部署Java Web应用程序的开发者、学习者。技术栈：后端：Java生态系统，包含Spring Boot、Shiro、MyBatis等，数据库使用Mysql 前端：Vue、Bootstrap、Jquery等适用场景示例： 1、毕业生希望快速启动一个新的Java Web应用程序。 2、团队寻找一个稳定的模板来加速产品开发周期。 3、教育机构或个人学习者用于教学目的或自学练习。 4、创业公司需要一个可以立即投入使用的MVP（最小可行产品）。

四六级报名管理系统.pdf: 四六级报名管理系统.pdf

C语言PTA-数组答案代码合集（湖工1-50）: C语言PTA-数组答案代码合集（湖工1-50）

＜项目代码＞YOLOv8 安全背心识别＜目标检测＞: YOLOv8 安全背心识别项目代码项目详细介绍请看链接： https://blog.csdn.net/qq_53332949/article/details/144543625 数据集详细介绍请看：https://blog.csdn.net/qq_53332949/article/details/141503406 数据集下载请看：https://download.csdn.net/download/qq_53332949/89711610?spm=1001.2101.3001.9500 按文件中requirements.txt文件配置环境即可使用。

后勤智能1. 1. 1. 1. 管理系统-...pdf: 后后勤智能1.。1. 1. 1. 管理系统-...pdf后勤智能1.。1. 1. 管理系统-...pdf后勤智能1.。1. 管理系统-...pdf后勤智能1.。管理系统-...pdf勤智能管理系统-...pdf

瓶子、塑料袋检测70-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar: 瓶子、塑料袋检测70-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rarset1（拍摄照片）-V15 2023-08-09 3:43 PM ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解和搜索非结构化图像数据 *注释，创建数据集 *导出，训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集对于最先进的计算机视觉培训笔记本，您可以与此数据集一起使用该数据集包括133张图像。汽车以可可格式注释。将以下预处理应用于每个图像： *像素数据的自动取向（带有Exif-Arientation剥离） *调整大小为640x640（拉伸）应用以下扩展来创建每个源图像的3个版本： * -24和+24度之间的随机旋转

基于ssm的ssm软件bug管理系统源代码（完整前后端+mysql+说明文档+LW）.zip: 管理员个人密码修改项目经理管理员工管理(调试员,解决方案人员) 日志管理(用户登录日志) 系统设置项目经理个人信息管理,修改项目模块管理按项目分配调试员调试员个人信息管理,修改 BUG信息管理(各个环节的跟踪信息录入) 查看解决方案解决方案人员个人信息管理,修改查看缺陷信息提出解决方案环境说明：开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 服务器：tomcat7

电路电压检测14-YOLO（v5至v9）、COCO、CreateML、Paligemma、VOC数据集合集.rar: 电路电压检测14-YOLO（v5至v9）、COCO、CreateML、Paligemma、VOC数据集合集.rar电路电压-V2释放 ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解非结构化图像数据 *注释，创建数据集 *导出，训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集它包括132张图像。电路电压以可可格式注释。将以下预处理应用于每个图像：没有应用图像增强技术。

基于java的物资管理系统项目源码.zip: 项目包含前后台完整源码。项目都经过严格调试，确保可以运行！具体项目介绍可查看博主文章或私聊获取助力学习实践，提升编程技能，快来获取这份宝贵的资源吧！

基于ssm的家居商城系统的设计与实现+jsp源代码（完整前后端+mysql+说明文档+LW）.zip: 系统实现：用户功能模块：用户点击进入到系统操作界面，可以对主页、个人中心、我的收藏管理、订单管理等功能模块，我的收藏管理：通过列表可以获取用户ID、收藏ID、表名、收藏名称、收藏图片信息并进行修改操作管理员功能模块：管理员通过用户名和密码填写完成后进行登录。管理员登录成功后进入到系统操作界面，可以对主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理等功能模块进行相对应操作。项目包含完整前后端源码和数据库文件环境说明：开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 服务器：tomcat7

Python项目-实例-08 抖音表白.zip: Python课程设计，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。

绝对给力的源码，在线音乐播放器完整项目.zip: Android 毕业设计，Android 毕业设计，小Android 程设计，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论