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中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
随机推荐
- Scrapy项目 - 实现腾讯网站社会招聘信息爬取的爬虫设计
通过使Scrapy框架,进行数据挖掘和对web站点页面提取结构化数据,掌握如何使用Twisted异步网络框架来处理网络通讯的问题,可以加快我们的下载速度,也可深入接触各种中间件接口,灵活的完成各种需求 ...
- Spring Boot （七）： Mybatis极简配置
Spring Boot (七): Mybatis极简配置 1. 前言 ORM 框架的目的是简化编程中的数据库操作,经过这么多年的发展,基本上活到现在的就剩下两家了,一个是宣称可以不用写 SQL 的 H ...
- Nginx安装教程，ubuntu18.04
本文介绍Nginx如何安装,操作系统为Ubuntu 18.04. 一.安装 (1)安装git 执行命令:“sudo apt-get install git”. (2)安装aptitude 执行命令 ...
- Spring 梳理 - 构造web项目时，使用eclipse如何引用jar包
方法1:直接将jar复制到web项目中的WEB-INF/lib目录中 方法2:构造buildpath时,不使用“外部jar”的形式
- 读《深入理解Elasticsearch》点滴-改正用户拼写错误
1.使用“建议”的方法:在query body的json结构体中,增加suggest节点:或者使用特殊的REST端点 2.es自带有多个不同的suggest实现,用来纠正用户的拼写错误及创建自动补全等 ...
- ps查看图层大小快捷键
1.图层大小尺寸的: ctrl+alt+c 2.图片大小尺寸.像素大小: ctrl+alt+i
- Python集训营45天—Day08 (文件操作)
目录 1. 文件操作介绍 2. 文件的读写 2.1 文本文件 2.2 二进制文件 2.3 JSON文件 3. 文件的定位,重命名和删除 4. 文件夹的相关操作 1. 文件操作介绍 大家应该听说过一句话 ...
- 如何选择一款适合自己操作系统、Windows、Mac还是Linux？
如何选择一款适合自己操作系统.Windows.Mac还是Linux? 作者:我们都很努力着 简介:电脑已经逐渐离不开我们生活,但是如何选择一个我们最佳,最适合的电脑操作系统就成了一些困难选择人士的一个 ...
- F#周报2019年第41期
新闻 .NET架构指南 美妙的WebSharper:学术刊物 .NET Core 3.0中Blazor Server的方案与性能 Mono 6.4.0发布说明 CapitolFSharp召集发言人 视 ...
- .net mvc web api Autofac依赖注入框架-戈多编程
今天自己搭了一套基于三层的依赖注入mvc web api 的依赖注入框架,在此总结下相关配置 1.设置应用程序的.net Framework版本为 4.5 2.通过Nuget 安装autofac包 I ...