什么是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的添加方法的更多相关文章

  1. CSS样式，语法，添加方法，文本，字体

    总结一些css的基础知识 ㈠css样式 css:cascading style sheets  层叠样式表 css内容和样式相分离,便于修改样式. ㈡css语法 ㈢css添加方法 ⑴行内添加:放在&l ...

  2. form表单，css简介，css选择器，css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  3. CSS简介和CSS选择器

    <pre name="code" class="html">Css 简洁 css 选择器 标签选择器 类选择器 ID选择器 Css 层叠样式表 Ca ...

  4. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. Bulma CSS - 简介

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是什 ...

  6. CSS 简介

    CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...

  7. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  8. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  9. html5快速入门（二）—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

随机推荐

  1. 23种设计模式之观察者模式（Observer Pattern）

    观察者模式(Observer Pattern):定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主体对象,这个主题对象在状态发生变化时,会通知所有观察者.当一个对象改变需要同时改变其他对象, ...

  2. linux mint安装ffmpge

    sudo add-apt-repository ppa:mc3man/trusty-media sudo apt-get update sudo apt-get install ffmpeg

  3. .Net Core 微服务容器系列基础目录篇

    1.开场白 HI,各位老铁,大家端午好,之前写了些关于.net core商城系列的文章,有点乱,今天心血来潮想着整理一下(今天只是先把目录列出来,后面的每篇文章这两天会进行重新修改的,目前先将就看下) ...

  4. 在vue的mounted下使用setInterval的误区

    1. vue对象的生命周期 1). 初始化显示(只执行一次) * beforeCreate() * created() * beforeMount() * mounted() 2). 更新状态(可执行 ...

  5. 你应该知道的简单易用的CSS技巧

    作为前端,在工作中难免会遇到关于排版的问题,以下是我整理的一些关于CSS的技巧,希望对你能有帮助. 1.每个单词的首字母大写 一般我们会用JS实现,其实CSS就可以实现. JS代码: var str ...

  6. bugku账号被盗了

    首先访问这个网站. 点击一下 使用burp抓包 将false改为true试试,获得了新的返回包,包含了一个网站,访问这个网站,下载下发现是一个软件. 随便填写一个账号密码,并使用wireshark抓包 ...

  7. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  8. tf.split

    tf.split(dimension, num_split, input):dimension的意思就是输入张量的哪一个维度,如果是0就表示对第0维度进行切割.num_split就是切割的数量,如果是 ...

  9. mongoDB4.0数据库

    下载:https://www.mongodb.com/ 安装:略 注意:使用前修改bin目录下配置文件mongodb.cfg,删除最后一行的'mp'字段 1. 启动服务与终止服务 net start ...

  10. drf框架接口文档

    drf框架接口文档 REST framework可以自动帮助我们生成接口文档. 接口文档以网页的方式呈现. 自动接口文档能生成的是继承自APIView及其子类的视图. 一.安装依赖 pip insta ...