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属性
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yushihua/p/14918162.html