定义：用于定义HTML内容在浏览器内的显示样式，如文字大小，颜色，字体

  • 设置样式：将要设置样式的内容用<span></span>样式括起来，然后再head中设置span

<head>
<style type="text/css">
span{
　　color:red;
}
</style>
</head>

<body>
<p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>

语法：由选择符和声明组成，声明又由属性和值组成。p是选择器，将这个选择器中的内容设置样式，不影响其他选择器中的内容样式。{}是声明，

p:{

color:blue;

font-size:12px;

}

注释代码:用/*注释语句*/(html中使用<!--注释语句-->)

样式插入形式：优先级：内联式>嵌入式>外部式

  • 内联式:一两句话的样式修改

语法：将样式直接写在HTML的标签中，并且是在style=“”双引号中，如果有多条css样式，写在一起用分号隔开

<p style="color:"blue";font-size:12px">颜色蓝色，字号12</p>

  • 嵌入式：好几句话的样式修改

语法：将样式写在<style></style>标签之间，放在<head></head>

<style type="text/css">

span{

color:red;

}

<body>
<p>慕课网，<span>超酷的互联网</span>IT技术免费学习平台<span>服务及时贴心</span>内容专业<span>有趣易学</span>。
</body>

  • 外部式

语法：把css代码写一个单独的外部文件，以“.css”为扩展名，在<head>内（不是在<style>标签内），使用<link>标签将css样式文件链接到HTML文件中

　　 <link href="bass.css" rel="stylesheet" type="text/css"/>

注：（1）css样式文件名称要以有意义的英文字母命名，如 main.css

　　（2）rel=“stylesheet” type=“text/css” 是固定写法不可修改

　　（3）<link>标签位置一般写在<head>标签之内

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>

style.css文件：

span{
color:red;
font-size:50px;
}

优先级：内联式>嵌入式>外部式

前提：三样式在css样式是在相同权值的情况下，待补充

嵌入式>外部式 的前提：嵌入式css的样式位置在外部式的后面，如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:red;
}
</style>
</head>

总之：就近原则（离被设置元素越近优先级越高）

端午小长假--前端基础学起来03CSS为网页添加样式的更多相关文章

  1. 端午小长假--前端基础学起来04CSS选择器

    定义: 选择器{ 样式: } 选择器指明{}中的样式的作用对象,即作用于网页中的哪些元素 <head><meta http-equiv="Content-Type" ...

  2. 小甲鱼零基础学python第25讲课后习题动手练习--通讯录

    小甲鱼零基础学python第25讲课后习题动手练习---通讯录 **************************通讯录要求******************************* 输入指令: ...

  3. web的各种前端打印方法之CSS控制网页打印样式

    来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...

  4. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  5. 零基础学到什么程度可以找一份web前端工作？

    能找到一份前端开发工作,首先你起码得是一个合格的初级前端工程师.那么,什么是初级前端工程师?初级前端工程师都会做些什么?这个问题需要分为以下几个方面来说: 一.对应岗位的工作职责初级前端,主要负责产品 ...

  6. 0基础学小程序----day1

    17的书,那时候微信小程序开发程序还是v0.01 19年都v1.02了.位置都不一样了,枯了 技术准备:WXML使用方法类似于HTML,(都不会) 自己的样式语言WXSS兼容了CSS(都不会) 使用J ...

  7. 好程序员web前端分享想要学习前端需要学那些课程

    好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...

  8. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  9. D16——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D16 20180927内容纲要: 1.JavaScript介绍 2.JavaScript功能介绍 3.JavaScript变量 4.Dom操作 a.获取标签 b ...

随机推荐

  1. maven相关资料

    http://www.yiibai.com/maven/ Maven教程 https://www.zhihu.com/question/20104270 http://huangnx.com/tags ...

  2. 测试分页查询出数据并分文件导出[java工程]

    package cn.shiyanjun.test; import java.util.ArrayList; import java.util.List; public class ExcelTest ...

  3. 转！！java中关键字volatile的作用

    用在多线程,同步变量. 线程为了提高效率,将某成员变量(如A)拷贝了一份(如B),线程中对A的访问其实访问的是B.只在某些动作时才进行A和B的同步.因此存在A和B不一致的情况.volatile就是用来 ...

  4. hiho1122_二分图匈牙利算法

    题目 给定一个图的N个节点和节点之间的M条边,数据保证该图可以构成一个二分图.求该二分图最大匹配. 题目链接:二分图最大匹配     首先通过染色法,将图的N个节点分成两个部分:然后通过匈牙利算法求二 ...

  5. entity refenrece 在views中的运用

    在一个content type中有一个field是entity reference, 那么这个字段的设置过程中会指定一个entity type和content type和一个具体内容的选择器, 然后到 ...

  6. grep使用方法

    linux grep命令详解 简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来 ...

  7. jQuery Ajax学习

    地址:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

  8. Unity5.1 新的网络引擎UNET（十五） Networking 引用--上

    http://blog.csdn.net/u010019717/article/details/46993697 孙广东  2015.7.21 本节提供了与网络系统一起使用的组件的详细信息. 1.Ne ...

  9. DirectX中的纹理及其创建

    正如大多初学者会遇到一个问题, 导入的图片为何不是原来的尺寸?例如800*600的实际上通过D3DXCreateTextureFromFile后变成的是1024*1024,即宽和高默认都会自动扩展为2 ...

  10. Qt Charts

    简述 Qt Charts模块提供了一套易于使用的图表组件.它采用了Qt Graphics View框架,因此图表可以很容易地集成到现代的用户界面. Qt Charts可以被用作QWidgets.QGr ...