css简介以及css的添加方法
什么是css?
CSS是Cascading Style Sheets的简称,CSS是用来美化网页中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。
css的基本语法
1.选择器{属性:值;属性:值;…….}。注意:属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用英文输入法下的分号;隔开。
Width:20px;宽
Height:20px;高
Background-color:red;背景颜色
font-size:24px;文字大小
text-align:left | center| right内容的水平对齐方式
text-indent:2em;首行缩进
Color:red;文字颜色
css的添加方法有几种?都有怎样的格式?
1.行内样式 :行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用!
<!--行内添加法-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="color:red;">
css行内添加法
</p>
</body>
</html>
2.内嵌样式:即使有公共css代码,也是需要定义的,适合文件很少css代码也不多的情况下使用。如果一个网站中有很多的页面,每个文件都会变大,后期维护难度也很大。
<!--内嵌的样式-->
<!DOCTYPE html>
<html lang="en">
<style type="text/css">p{color:red;}</style>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>内嵌样式的表示法</p>
</body>
</html>
3.单独文件样式:页面结构html代码和样式css代码完全分离维护起来比较方便,需要改变网站风格,只需要修改公共文件可以在同一个html文件中内部引用多个外部样式表!
css文件:
style.css
p{colo:red;/*设置文字颜色*/}
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="外部文件.css">
<head>
<body>
<p>css单独文件添加方法</p>
</body>
</html>
css优先使用那种添加方法?
1.多重样式可以层叠,可以覆盖
2.样式优先级按照"就近原则"
3.行内样式>内嵌样式>链接样式>浏览器默认样式!
css简介以及css的添加方法的更多相关文章
- CSS样式,语法,添加方法,文本,字体
总结一些css的基础知识 ㈠css样式 css:cascading style sheets 层叠样式表 css内容和样式相分离,便于修改样式. ㈡css语法 ㈢css添加方法 ⑴行内添加:放在&l ...
- form表单,css简介,css选择器,css样式操作
form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...
- CSS简介和CSS选择器
<pre name="code" class="html">Css 简洁 css 选择器 标签选择器 类选择器 ID选择器 Css 层叠样式表 Ca ...
- CSS 简介、 选择器、组合选择器
#CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Bulma CSS - 简介
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是什 ...
- CSS 简介
CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- html5快速入门(二)—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
随机推荐
- 利用Python进行数据分析:【Pandas】(Series+DataFrame)
一.pandas简单介绍 1.pandas是一个强大的Python数据分析的工具包.2.pandas是基于NumPy构建的.3.pandas的主要功能 --具备对其功能的数据结构DataFrame.S ...
- C/C++ 中带空格字符串输入的一些小trick
今天在重温 C++ 的时候发现自己存在的一些问题,特此记录下来. 我们可以看一下下面这段代码: #include <iostream> #include <cstdio> #i ...
- 当我们在聊 Serverless 时你应该知道这些
作者 | 杨泽强(竹涧)阿里云技术专家 说起当前最火的技术,除了最新的区块链.AI,还有一个不得不提的概念是 Serverless.Serverless 作为一种新型的互联网架构,直接或间接推动了云计 ...
- springboot之本地缓存(guava与caffeine)
1. 场景描述 因项目要使用本地缓存,具体为啥不用redis等,就不讨论,记录下过程,希望能帮到需要的朋友. 2.解决方案 2.1 使用google的guava作为本地缓存 初步的想法是使用googl ...
- .Net Core Serverless初体验
什么是Serverless Serverless 是一个当今软件世界中比较新的话题.它并没有一个普遍公认的权威定义,每个人每个企业对它的解释可能都有不同,而 Serverless 正是在这种情况下不断 ...
- 低效sql语句执行缓慢引起的大量占用服务器的CPU问题处理 (优化心得)
1> 2> 3> 4> 5>删除不良的执行计划后执行时间仍然有150s,这实在是太慢了,继续查看原sql代码,发现父表的关联条件放在了子查询里,这是应该避免的 调整原sq ...
- C#基于Quartz.NET实现任务调度并部署Windows服务
一.Quartz.NET介绍 Quartz.NET是一个强大.开源.轻量的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,用C#改写,可用于winform和asp ...
- python编程基础之十八
字符串的查找和替换常用函数: str.count(sub,start = 0,end = len(str)) 计算sub 在str中出现的次数,[start,end)寻找区间 str.find(str ...
- 手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝
手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝ 想用python做机器学习吗,是不是在为从哪开始挠头?这里我假定你是新手,这篇文章里咱们一起用Python完成第一个机器学习项目.我会手把手 ...
- [洛谷P1062/NOIP2006普及组] 数列
首先题面是这样的: 给定一个正整数 k(3≤k≤15) ,把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当 k=3 时,这个序列是: 1,3,4,9,10,12,13,- ...