CSS——NO.1(初识CSS)
*/
* Copyright (c) 2016,烟台大学计算机与控制工程学院
* All rights reserved.
* 文件名:text.cpp
* 作者:常轩
* 微信公众号:Worldhello
* 完成日期:2016年8月5日
* 版本号:V1.0
* 程序输入:无
* 程序输出:见运行结果
*/
CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
如下列代码:
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
CSS样式的优势
为什么使用css样式来设置网页的外观样式呢?有一段文字,我们想把“超酷的互联网”、“服务及时贴心”、“有趣”这三个短语的文本颜色设置为红色,这时就
可以通过设置样式来设置,而且只需要编写一条css样式语句。
第一步:把这三个短语用<span></span>括起来。
第二步:写入下列代码:
span{
color:red;
}
例:
<span>超酷的互联网</span>
<span>服务及时贴心</span>
<span>有趣</span>
然后所选中的文字就会变红。
CSS代码语法
css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
p{font-size:12px;color:red;}
注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:
p{
font-size:12px;
color:red;
}
CSS注释代码
就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)。就像下面代码:
CSS——NO.1(初识CSS)的更多相关文章
- 初识CSS
css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...
- #WEB安全基础 : HTML/CSS | 0x1初识CSS
"我受够这些难看的网页了,我怎么才能让它变得好看点?"你说. 我答道:"看来你得学点CSS了" 学习这些东西只有一个原则,就是用你的脑袋想,用你的眼睛看,用的你 ...
- web前端基础——初识CSS
1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...
- 前端基础 & 初识CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.l 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 每个CS ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- [css]我要用css画幅画(九) - Apple Logo
接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...
- [css]我要用css画幅画(八) - Hello Kitty
接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- [css]我要用css画幅画(六)
接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...
随机推荐
- AOP统一处理修改人、创建人、修改时间、创建时间
1.配置拦截 首先开启 <aop:aspectj-autoproxy proxy-target-class="true"/>代理.解释一下下面..的意思是多个 < ...
- 黑马eesy_15 Vue:04.综合案例(前端Vue实现)
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
- selenium自学进度-2014.12.3
今天把小米系列的视频看到了倒数第二课 他讲得很好,只是我现在是看第一遍,回头还需要照着视频多练练. 成长的道路问题艰辛的,学习的道路问题孤独的,希望自己能够坚持下去. 不要让今天的努力白费,不能让未来 ...
- Linux图形界面与命令行界面切换
1.没有安装图形界面的Linux系统执行下面命令安装图形界面: yum groupinstall "GNOME Desktop" "Graphical Administr ...
- 表查询语句及使用-连表(inner join-left join)-子查询
一.表的基本查询语句及方法 from. where. group by(分组).having(分组后的筛选).distinct(去重).order by(排序). limit(限制) 1.单表查询: ...
- 启动查看crontab日志服务
方法1: . 修改rsyslog文件,将/etc/rsyslog.d/-default.conf 文件中的#cron.*前的#删掉: . 重启rsyslog服务service rsyslog rest ...
- iOS头条新闻App、自动布局、省市区联动、登录按钮动画、Alert弹框效果等源码
iOS精选源码 LEEAlert -- 优雅的Alert ActionSheet 登录按钮 省市区三级联动 JHViewCorner - 一行代码搞定圆角 JHFrameLayout - 一行代码实现 ...
- ready vs onload
1 ready事件:当DOM载入就绪,可以查询,操纵时绑定一个要执行的函数.它可以极大地提高web应用程序的响应速度. 2 onload事件:js中的方法,网页的所有元素.图片全部加载完毕才执行这个 ...
- easyui 表单提交前的 confirm 处理
最近学习用 easyui,异步提交表单是遇到一个小问题 $('#fModiDetail').form('submit',{ url:'...', onSubmit:function(){ if($(t ...
- [LC] 398. Random Pick Index
Given an array of integers with possible duplicates, randomly output the index of a given target num ...