• CSS配置颜色和文本

    层叠样式表的优点

    • 更多排版和页面布局控制
      • 可控制字号、行间距、字间距、缩进、编剧以及定位
    • 样式和结构分离
      • 页面使用的文本格式和颜色可独立于网页主体（body区域）进行配置和存储
    • 样式可以存储
      • 允许将样式存储到单独文档并将其与网页关联
    • 样式变得更小
    • 网站维护更容易

    配置层叠样式表

    • 内联样式
      • 将代码直接写入网页的主体区域
    • 嵌入样式
      • 在网页页头区域（<head></head>之间)定义
    • 外部样式
      • 单独文件编码。网页在页头区域用link元素链接到文件
    • 导入样式
      • 与外部样式类似。用@import指令将外部样式表导入嵌入样式或导入另一个外部样式表

    CSS选择符和声明

    • CSS样式规则选择符
      • 选择符可以是HTML元素名称、类名或id。
    • CSS样式规则声明
      • 声明是指要设置的CSS属性及其值

    background-color属性

    • 配置元素背景色
      body{background-color:yellow}

    color属性

    • 配置元素文本颜色
      body{color:blue}

    配置背景色和文本色

    • 一个选择符要配置多个属性，用分号(;)分隔不同声明
    body{color:white;background-color:orchid;}
    属性名称 说明
    background-color 元素背景色
    color 元素前景（文本）颜色
    font-family 配置字体或字体家族
    font-size 字号
    font-style 字体样式
    font-weight 字体"浓淡"或粗细
    letter-spacing 字间距
    line-height 行间距
    margin 配置元素边距的快捷方式
    margin-left 元素左侧边距
    margin-right 元素右侧边距
    text-decoration 决定文本是否添加下划线，通常应用于超链接
    text-indent 配置文本首行缩进
    text-shadow 配置元素中显示文本的阴影
    text-transform 配置文本大小写
    white-space 配置元素内的空白
    width 元素中内容的宽度
    word-spacing 词间距

    在网页上使用颜色

    十六进制颜色值

    • 十六进制以16位基数，基数位0-9，A-F
    • 十六进制值表示RGB颜色使用三对十六进制数位。每一对值的范围是00-FF。这三对值分别代表红绿蓝的颜色强度

    CSS颜色语法

    CSS语法 颜色类型
    p{color:red} 颜色名称
    p{color:#FF0000} 十六进制颜色值
    p{color:#F00} 简化十六进制值（每个字符代表一个十六进制对——仅适合Web安全色）
    p{color:rgb(255,0,0)} 十进制颜色值（RGB三元组)
    p{color:hs1(0,100%,50%)} HSL颜色值

    用style属性配置内联CSS

    style属性

    • 每个声明都由属性和值构成
    • 属性和值以冒号分隔
    • 属性不止一个就用分号(;)隔开
    <h1 style="color:#cc0000">该标题显示成红色</h1>
<h1 style="color:#cc0000;background-color:#cccccc">该标题显示成灰底红色</h1>

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Inline CSS Example</title>
        <meta charset="utf-8">
    </head>
    <body style="background-color: #F5F5F5;color: #008080;">
        <h1 style="background-color: #008080;color: #F5F5F5;">Inline CSS</h1>
        <p>This paragraph inherits the styles applied to the body tag.</p>
        <p style="color: #333333;">This paragraph overrides the text color style applied to the body tag.</p>
    </body>
</html>

    image

    • 内联式不常用，效率不高

    用style元素配置嵌入CSS

    style元素

    • 嵌入样式应用于整个网页文档，通常放到head区域的<style>元素中
    • 以<style>开始，</style>结束
    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Embedded Styles</title>
        <meta charset="utf-8">
        <style>
            body
            {
                background-color: #E6E6FA;
                color: #191970;
            }
        </style>
    </head>
    <body>
        <h1>Embedded CSS</h1>
        <p>This page uses embedded styles.</p>
    </body>
</html>

    image

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
<style>
    body
    {
        background-color: #E2FFFF;
        color: #15495E;
    }
    h1
    {
        background-color: #237B7B;
        color: #E2FFFF;
    }
    h2
    {
        background-color: #B0E6E6;
        color: #237B7B;
    }
</style>
</head>
<body>
 <header>
   <h1>Trillium Media Design</h1>
 </header>
   <nav>
 <a href="index.html">Home</a> <a href="services.html">Services</a> <a href="contact.html">Contact</a>
 </nav>
 <main>
   <h2>New Media and Web Design</h2>
  <p>Trillium Media Design will take your company&#39;s Web presence to the next level. We offer a comprehensive range of services.</p>
   <ul>
     <li>Website Design</li>
     <li>Interactive Animation</li>
     <li>E-Commerce Solutions</li>
     <li>Usability Studies</li>
     <li>Search Engine Optimization</li>
   </ul>
   <h2>Meeting Your Business Needs</h2>
   <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
 </main>
 <footer>Copyright &copy; 2020 Your Name Here</footer>
</body>
</html>

    image

    • 难以维护，效率低

    用CSS配置字体

    font-family属性

    font-family 说明
    serif(有衬线) 所有serif字体在笔画末端都有小的衬线，常用于显示标题
    sans-serif(无衬线) 常用于显示网页文本
    monospace(等宽) 常用于显示代码
    cursive(草书、手写体) 一般不用
    fantasy(异体) 风格夸张，有时用于网页标题
    • CSS引入@font-face在网页中嵌入字体
    @font-face{font-family:MyAwesomeFont;
src:url(myawesomefont.woff) format("woff");}

h1{font-family:MyAwesomeFont, Georgia,serif;}

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>KayakDoorCounty.net</title>
<style>
  body
  {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  h2,h3
  {
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
</style>
</head>
<body>
<header> 
  <h1>KayakDoorCounty.net</h1>
</header>
<nav>
<a href="index.html">Home</a> &nbsp;
<a href="tours.html">Tours</a> &nbsp;
<a href="reservations.html">Reservations</a> &nbsp;
<a href="contact.html">Contact</a> &nbsp;
</nav>
<main>
<h2>Your next adventure is only a paddle away ....</h2>

<p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
<h3>Featured tours this week:</h3>
<ul>
  <li>Cana Island</li>
  <li>Mink River</li>
  <li>Europe Lake</li>
</ul>
</main>
<footer>
<small><i>Copyright &copy; 2020 KayakDoorCounty.net</i></small>
</footer>
</body>
</html>

    image

    更多CSS文本属性

    font-size属性

    值类别 值 说明
    文本值 xx-samll,x-samll,small,medium(默认),large,x-large,xx-large 文本大小缩放良好，字号选项不多
    像素单位(Pixel Unit,px) 带单位数值，如10px 基于屏幕分辨率显示
    磅单位(Point Unit,pt) 带单位数值，如10pt 用于配置网页的打印版本
    Em单位(em) 带单位数值，如.75em 推荐，大小缩放良好，字号选项多
    百分比单位 百分比数值，如75% 推荐，大小缩放良好，字号选项多

    font-weight属性

    • font-style属性
    • line-height属性
    • text-align属性
    • text-indent属性
    • text-decoration属性
    • text-transfrom属性
    • letter-spacing属性
    • word-spacing属性
    • white-spacing属性
    • text-shadow属性
  • 相关阅读:
    Android Studio 更新gradle插件
    CentOS7 安装 mplayer
    Centos7 安装Git-cola
    Centos Java 从1.7升级为1.8
    PHPStorm 10 激活
    openssh无法登录：server responded "algorithm negotiation failed”
    中文Ubuntu主目录下的文档文件夹改回英文
    设计模式六大原则
    设计模式之【桥接模式--Bridge】
    设计模式之【外观模式-Facade】
  • 原文地址：https://www.cnblogs.com/yushihua/p/14918162.html
Copyright © 2020-2023  润新知