前言
本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。
作者LFuser

正文

新手注意:如果你学习遇到问题找不到人解答,可以点我进裙,里面大佬解答及web前端精讲教.程!

CSS样式分为:内联式css样式、嵌入式css样式、外部式css样式

  1. 内联式css样式
    内联式css样式表就是把css代码直接写在现有的HTML标签中:
<p style = "color:#000099">这是一个段落标记</p>

采用style属性。范围只针对此标签适用。

该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。

  1. 嵌入式css样式
    在HTML文档中的< head >中使用< style >标记,,被称为内嵌式。
<head>
<style>
/*选择符{ 属性:属性值 ;属性:属性值;}*/
a{color:#FF0000 ;} #img1{width:800px;} /*id选择器*/ .img2{ width:800px;} /*类选择器*/ </style>
</head>
<body>
<a href="#">超链接</a> <img src="xx.jpg" id="img1"> <img src="xxx.jpg" class="img2"> </body>

在head标签中加入< style >标签,对多个标签进行统一修改,范围针对此页面。新手注意:如果你学习遇到问题找不到人解答,可以点我进裙,里面大佬解答及web前端精讲教.程!

该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。

  1. 外部式css样式
    采用< link >标签。例如:< link href = “a.css” type = “text/css” rel = “stylesheet” >< /link >
    a.css的代码如下
/*选择符{ 属性:属性值 ;属性:属性值;}*/
a{color:#FF0000 ;} #img1{width:800px;} /*id选择器*/ .img2{ width:800px;} /*类选择器*/

html中引入css

<head>

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

</head>

<body>
<a href="#">超链接</a> <img src="xx.jpg" id="img1"> <img src="xxx.jpg" class="img2"> </body>

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名(也可以为调用其他网站CSS)。

 

CSS的三种样式,有一种你肯定不知道的更多相关文章

  1. css 实现三栏布局的四种方式

    三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...

  2. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  3. CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...

  4. 大家好,又是新的一天。今天给大家带来一些新的知识:选择器的种类和css的三种样式

    今天我们为大家 选择了 六种 选择器: 1. 标签选择器 2.id选择器 3.class选择器 4.后代选择器 5.子代选择器 6.交集选择器 我们就举三个典型的例子:后代选择器,子代选择器和交集选择 ...

  5. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  6. 转载:CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

    (仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...

  7. html中css的三种样式

    在html中定义CSS样式的方法有三种,新建CSS文件 使用link 关联 这种是最常用的外部引用样式,第二种讲样式写在 head 头部里面 这种是页面样式 ,第三中样式直接写在行内  style里面 ...

  8. java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  9. CSS的三种引入方式

    1.标签 <style>定义样式         <link> 资源的引用(某些css的样式) 2.属性 rel=”stylessheet” 外部样式表  (rel为定义当前文 ...

  10. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

随机推荐

  1. 03-MyBatis拦截器机制

    目录 MyBatis拦截器介绍 拦截器的使用 拦截器介绍及配置 源码分析 总结 本文转载自MyBatis拦截器原理探究 MyBatis拦截器介绍 MyBatis提供了一种插件(plugin)的功能,虽 ...

  2. MySql: AUTO_INCREMENT

    首先要在Column使用AUTO_INCREMENT (每张表只有一个列可以AUTO_INCREMENT): 以下示例取自MySql官网(http://dev.mysql.com/doc/refman ...

  3. 【微信小程序】踩坑指南(持续更新)

    前言 说明: 基于mpvue框架:mpvue官方文档 语法同vue框架:vue官方文档 小程序中会有一些坑点,这里会就工作中遇到的坑一一列举出来 无说明时请直接看代码注释 v-show无法使用在小程序 ...

  4. win10 visual studio 2017环境中安装CUDA8

    从https://developer.nvidia.com/cuda-toolkit-archive下载CUDA 8 安装 从https://developer.nvidia.com/gamework ...

  5. nyoj 1112 求次数 (map)

    求次数 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 题意很简单,给一个数n 以及一个字符串str,区间[i,i+n-1] 为一个新的字符串,i 属于[0,strl ...

  6. expect 自动填充密码

    它的脚本以#!/usr/bin/expect开头,执行时用expoct,而不是bash.我的一个给samba自动创建用户并且自动填写默认密码的脚本如下: vim smb_passwd.exp #!/u ...

  7. 树的点分治 (poj 1741, 1655(树形dp))

    poj 1655:http://poj.org/problem?id=1655 题意: 给无根树,  找出以一节点为根,  使节点最多的树,节点最少. 题解:一道树形dp,先dfs 标记 所有节点的子 ...

  8. centos下安装composer

    centos下,yum 安装没效果,按照官网的安装方法: curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/ ...

  9. 在input输入值改变reducer里的值

    输入值改变reducer里的值 通过store.dispatch传入reducer中,函数的第二个参数可以接收到 在reducer中 在todolist文件中 然后在把this.state中的值改变

  10. windows 10 上源码编译OpenCV并支持CUDA | compile opencv with CUDA support on windows 10

    本文首发于个人博客https://kezunlin.me/post/6580691f/,欢迎阅读! compile opencv with CUDA support on windows 10 Ser ...