>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20537 个阅读者 刷新本主题
 * 贴子主题:  在HTML页面中加入CSS的基本步骤 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-13 13:44:22     消息  查看  搜索  好友  邮件  复制  引用

  

HTML  样式- CSS

     CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.                    

如何使用CSS

     CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

    CSS 可以通过以下方式添加到HTML中:    
  • 内联样式- 在HTML元素中使用"style"  属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style>  元素 来包含CSS
  • 外部引用 - 使用外部 CSS  文件
     最好的方式是通过外部引用CSS文件.            

内联样式

     当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
     以下范例显示出如何改变段落的颜色和左外边距。

         <p style="color:blue;margin-left:20px;">这是一个段落。</p>                      

HTML样式范例 - 背景颜色

     背景色属性(background-color)定义一个元素的背景颜色:                    

范例

< body   style = " background-color:yellow; " >
< h2   style = " background-color:red; " > 这是一个标题 </ h2 >
< p   style = " background-color:green; " > 这是一个段落。 </ p >
</ body >

                   早期背景色属性(background-color)是使用 bgcolor 属性定义。    

HTML 样式范例 - 字体, 字体颜色 ,字体大小

     我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:            

范例

< h1   style = " font-family:verdana; " > 一个标题 </ h1 >
< p   style = " font-family:arial;color:red;font-size:20px; " > 一个段落。 </ p >

                  现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用<font>标签。    

HTML 样式范例 - 文本对齐方式

     使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:                    

范例

< h1   style = " text-align:center; " > 居中对齐的标题 </ h1 >
< p > 这是一个段落。 </ p >

                 文本对齐属性 text-align取代了旧标签 <center> 。    

内部样式表

     当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head>  部分通过 <style>标签定义内部样式表:

<head>

<style type="text/css">

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

外部样式表

     当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>

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

</head>

HTML 样式标签


标签 描述
<style> 定义文本样式
<link> 定义资源引用地址
                    

已弃用的标签和属性

     在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

    不建议使用的标签有: <font>, <center>, <strike>

    不建议使用的属性: color 和 bgcolor.




程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-20 20:22:00 重新编辑]
  Java面向对象编程-->第一个Java程序
  JavaWeb开发-->自定义JSP标签(Ⅱ)
  JSP与Hibernate开发-->第一个helloapp应用
  Java网络编程-->XML数据处理
  精通Spring-->通过Vuex进行状态管理
  Vue3开发-->CSS过渡和动画
  Webpack 插件开发指南
  vue30道面试题
  07、手把手教Vue--路由「Vue-router」 - TigerChain
  Vue路由传递参数详细说明
  Vue CLI内网安装(禁止运行vue指令解决方案)
  JS 循环删除数组
  用Vue-Awesome-Swiper实现旋转叠加轮播效果,平移轮播效果
  JS对树形数据的遍历和过滤,
  jQuery 遍历DOM 树中的同胞元素
  JavaScript的HTML DOM Column 对象
  JavaScript Date 对象
  HTML5 内联 SVG
  JavaScript 库
  jQuery Mobile 事件
  jQuery Mobile 简介
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。