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中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
随机推荐
- CDH集群的时间同步--简要配置要求
每个节点执行ntpstat 和 timedatectl 都显示同步并且时间相同,那么CDH才能正常使用.每次ntp服务同步到外部授时中心都要一段时间(5~10分钟),只有当NTP server(nod ...
- SpringBoot -> @Import使用
@Import 注解出自spring-context包中 package org.springframework.context.annotation; import java.lang.annota ...
- java基础面试集结
1.hashMap实现原理及相关问题 :https://blog.csdn.net/h1130189083/article/details/78303865
- 如何配置VMware客户虚拟机使用NAT模式联网通信
本例中配置客户虚拟机(CentOS)使用NAT(网络地址转换Network Address Translation)模式进行联网到公网(互联网).客户机网段为192.168.1.0/24网段,经NAT ...
- Ansible Roles角色
Roles小技巧: 1.创建roles目录结构,手动或使用ansible-galaxy init test roles 2.编写roles的功能,也就是tasks. nginx rsyncd memc ...
- [插件化开发] 1. 初识OSGI
初识 OSGI 背景 当前product是以solution的方式进行售卖,但是随着公司业务规模的快速夸张,随之而来的是新客户的产品开发,老客户的产品维护,升级以及修改bug,团队的效能明显下降,为了 ...
- RRiBbit,一个事件总线.基于spring配置不同服务通信!
1.何为RRiBbit? *一种开源事件总线技术,能够让模块(组件)之间双向通讯,也被称为请求相应总线(request-response-bus),使用简单,相对其他框架来说,RRiBbit只需要加个 ...
- SecureCRT连接虚拟机下的CentOS7
1.首先在VMWare下配置CentOS为桥接模式: 2.查看本机ip: 3.ip addr查看centos的mac地址: 4.在root权限下修改/etc/sysconfig/network-scr ...
- 【干货系列之萌新知识点】python与变量和运算符
一.注释 注释一行:# 为注释符 注释多行:'或者"为注释符 二.print输出 print()函数,作用是打印一些信息语屏幕上. 例如:print("hello world!&q ...
- sqli-labs靶机注入笔记1-10关
嗯,开始记录sqli-lab的每关笔记,复习一次 1-2关 基于错误的字符串/数字型注入 闭合的符号有区别而已 http://www.sqli-lab.cn/Less-1/?id=1 or 1=1 - ...