层叠样式表的优点

  • 更多排版和页面布局控制
  • 可控制字号、行间距、字间距、缩进、编剧以及定位
  • 样式和结构分离
  • 页面使用的文本格式和颜色可独立于网页主体（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>

css适配ios css配置_html

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

用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>

css适配ios css配置_CSS_02

<!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'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 © 2020 Your Name Here</footer>
</body>
</html>

css适配ios css配置_Web_03

  • 难以维护，效率低

用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>  
<a href="tours.html">Tours</a>  
<a href="reservations.html">Reservations</a>  
<a href="contact.html">Contact</a>  
</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 © 2020 KayakDoorCounty.net</i></small>
</footer>
</body>
</html>

css适配ios css配置_css适配ios_04

更多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属性