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中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
随机推荐
- MonkeyRunner学习笔记（1）
MonkeyRunner是java编程语言实现的Python写出来的一个API调用工具 MonkeyRunner有三个类:MonkeyRunner,MonkeyDevice,MonkeyImage M ...
- Flask基础(08)-->错误捕获(异常捕获)
错误捕获(异常捕获) from flask import Flask from flask import abort app = Flask(__name__) @app.route('/demo1' ...
- Angular6 CodeMirror在线编辑sql 智能提示
1. 安装ng2-codemirror包.codemirror包 npm install ng2-codemirror -- save npm install codemirror -- save 2 ...
- Spring GetBean流程
第一节讲解Spring启动的时候说到,Spring内部先解析了所有的配置,加载所有的Bean定义后,再根据需要对Bean进行实例化和初始化.除开Spring自己主动新建的对象,第一次根据Bean定义 ...
- Yii2.0怎么设置时区？
在config文件夹下,main.php 中, return [ 'charset' => 'utf-8', 'language' => 'zh-CN', 'timeZone' => ...
- 检测MySQL主从是否异常
#!bin/bash user='root' passwd="123" host="192.168.192.156" mycmd="mysql -u$ ...
- Spring Boot （十一）： Spring Boot 定时任务
在实际的项目开发工作中,我们经常会遇到需要做一些定时任务的工作,那么,在 Spring Boot 中是如何实现的呢? 1. 添加依赖 在 pom.xml 文件中只需引入 spring-boot-sta ...
- Activity的四种加载模式详解：
先来看看总结图: 模式详解: standard模式: 标准启动模式,也是activity的默认启动模式.在这种模式下启动的activity可以被多次实例化,即在同一个任务中可以存在多个activity ...
- java中不创建使用第三方变量，交换两个数的值
1.直接使用算术运算法交换 先把两个数的和赋值给其中一个,然后做减法.例如num1=num1+num2; 此时num2(交换之后)就等于num1减去num2:废话不多说,直接上代码 public cl ...
- 手把手教你安装Eclipse最新版本的详细教程 - 大佬的鸡肋，菜鸟的盛宴（非常详细，非常实用）
简介 首先声明此篇文章主要是针对测试菜鸟或者刚刚入门的小伙们或者童鞋们,大佬就没有必要往下看了. 写这篇文章的由来是因为后边要用这个工具,但是由于某些原因有部分小伙伴和童鞋们可能不会安装此工具,为了方 ...