前端基础-CSS-2

上篇我们介绍了css的的由来和编写语法,并展示了一个基本的例子,这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示,css包含非常多的样式设置,在这里我会把最基础和常用的样式设置展示给大家,上篇我们了解了div这个块元素的使用,因为div内部可以写其它标签,但如果我们像上篇一样设置,整个块里的元素都会生效,那如果我只想设置div中某个标签呢,或者我们想通过div的id或class来设置样式,另外我们常见的就是表单,那如何给表单设置样式,以及如何给一个超链接设置样式,这就是今天我们要讲的内容, 首先还是跟之前一样,我们先给出我们基本的html代码和截图:

css例子1

这是一个特别的网站

首先感谢您的访问

来这做总得做点什么吧?

能干的事太多,我只说三件,但每件都不同

往下面的框写你的故事

登陆到后台系统

带你到python世界

请输入您账户密码

姓名:

密码:

离开的时候点个赞或者留个言吧

以上就是基本的Html代码,大家看到我注释掉了这行 内容,这个文件就是我们一会要写的样式文件,为了展示不带样式的页面,我先把这行注释掉了,那这段代码用chrome打开截图如下:

那接下来我们完成样式文件的编写,首先我们完成的任务如下:

1、设置背景颜色浅蓝色

2、给h1字体加一个边框,设置h2字体颜色

3、设置div中p段落背景颜色

4、设置表单边框,指定宽度和长度

5、设置超链接颜色和一些文字装饰

基本就这些吧,我们直接上代码:

/*背景色*/

body{

background-color: #a8e6ff;

}

/*h1的边框*/

h1{

border: 1px solid black;

}

/*h2颜色*/

h2{

color: purple;

}

/*段落背景色,注意是div下的p标签*/

div p{

background: #fffca5;

}

/*表单边框*/

#textblock{

border: 5px solid gray;

width: 400px;

height: 200px;

}

/*超链接红色*/

a{

color: red;

}

/*表单边框*/

input{

border: 2px solid rgb(144,0,0)

}

/*文字装饰*/

#itemone{

text-decoration: overline;

color: purple;

}

/*表单底部颜色*/

.exit{

background-color: gray;

border: 4px dashed yellow;

}

以上就是整个样式表文件内容,我们看到如果要设置div中p标签的样式,格式可以是 div p(中间一个空格) 的方式来选择设置,另外所有的div都可以设置class或id, 这样我们就可以通过id或class设置样式了,它们的选择方式id以#id名词,例如例子中的#itemone, 如果是classs,就以.开头,例如例子中的.exit, 有了这种方式,我们在设置我们页面样式时会非常的灵活,基本的就讲到这了,保存退出,并取消掉样式文件注释, 刷新浏览器会看到生效后的样式,截图如下:

那么通过这个小例子,我相信大家对css的一些基本使用已经解了,那下篇我们要说css中的盒子模型,这是css学习的一个重点,我们下篇见。

本文来自企鹅号 - python运维技术媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小筱月

animate 动画滞后执行的解决方案

针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有如下:

32710
来自专栏韦弦的偶尔分享

微信小程序设置图片固定比例

有时我们的图片并不是同一个比例,但是我们需要设置图片保持一个固定的比例,在小程序里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设...

1.1K20
来自专栏我和未来有约会

Silverlight初级教程-动画

Silverlight初级教程 动画 在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 ...

196100
来自专栏静默虚空的博客

HTML 基础

HTML 基础 本章展示最常用的 HTML 标签。 标题 标题很重要 请确保标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。 搜索引擎...

396100
来自专栏前端架构与工程

利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处...

19680
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

24760
来自专栏专业duilib使用+业余界面开发

Duilib技巧:背景图片平铺

28580
来自专栏知道一点点

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

12220
来自专栏听雨堂

用CSS制作可交换带事件处理的图片按钮

      按钮是网页最常用的控件了,怎样设计一个更好看的按钮,这两天试验了几种方法:       1、用Javascript交换图片的方式先在网页中制作图片,...

22450
来自专栏无原型不设计

Mockplus实例之一看就会de五个交互功能

实例来源:豆瓣新加日记(https://www.douban.com/note/create) 先看看豆瓣新加日记的网页: ? 再看看已经制作好的原型预览...

59360

扫码关注云+社区

领取腾讯云代金券