【静态页面架构】CSS之颜色与单位

CSS架构

一.颜色与单位
颜色:

前景色与背景色：设置文本和背景颜色

<style>
        html，body{
            background-color: blue;
            /* 前景色 - 就是指字体颜色(color)
            * 浏览器默认的字体颜色为黑色
            背景色 - 就是指指定元素的背景颜色(background-color)
            * 浏览器默认的背景颜色为透明的(transparent)
         */
        }
        h2 {
            color: red;/*设置文本颜色*/
            background-color: transparent;/*设置背景色*/
        }
    </style>
</head>
<body>
<h2>爱新觉罗</h2>
</body>

颜色的命名：

<style>
        /*1.单词方式表示颜色 目前主流浏览器识别147种预定义颜色
              1；可选的数量有限
              2；不同浏览器中存在色差问题
            2.使用RGB方式表示颜色 称为三原色(不能再分解的三种基本颜色)
              1；RGB - red(红色)、green(绿色)、blue(蓝色)
              2；具体使用方式
                a.函数式RGB颜色 - rgb(红色, 绿色, 蓝色)
                  1；每个颜色的值范围 - 0 ~ 255
                b.十六进制RGB颜色 - #红色绿色蓝色
                  1；每个颜色具有两位
                  2；每个颜色的值范围 - 00 ~ FF
                  3；如果每个颜色的两位相同的话 -> 可以省略其中一个*/
        h2 {
            color: rgb(0,0,255);
            background-color: #CC0000;
        }
    </style>
</head>
<body>
<h2>呼延觉罗</h2>
</body>

透明度：是以opacity定义元素透明度；范围值0到1.0

<style>
        /*html, body {
            background-color: black;
        }
        h1 {
            color: lightcoral;
            background-color: darkcyan;
            !*
                透明度 - 默认值为 1.0 (完全不透明)
                * 同时修改前景色和背景色
             *!
            opacity: 0.5;
        }*/

        h1 {
            color: lightskyblue;
            /*
                颜色的表示方式 - 除了有rgb()方式以外，还有rgba()方式
                * rgba()中的 a 表示透明度
             */
            background-color: rgba(255,0,0,0.5);
        }

    </style>

二。文本

结构化元素:

标题元素；标题大小用h1到h6表示

常用的h1到h3，h1最大，h6最小

<body>
<!--
标题元素为 <h1>到<6>
<h1>为最大，<h6>为最小
一般浏览器都有自己的默认样式（也可以以CSS进行设置
标题都会独占一行，也是垂直排列的）-->
<h1>犬夜叉</h1>
<h2>犬夜叉</h2>
<h3>犬夜叉</h3>
<h4>犬夜叉</h4>
<h5>犬夜叉</h5>
<h6>犬夜叉</h6>
</body>

段落元素；是以p元素定义的

<body>
<p>Lorem ipsum dolor sit amet, consecteturconsequuntur dolor eaque facere facilis magnam, modi officiis pariatur possimus quasi, rerum sunt .</p>
<p>adipisicing elit. Atque cupiditate eos facere. A accusamus asperiores, at consectetur </p>
</body>

其他结构化元素

粗体元素是以b元素定义的
斜体元素是以i元素定义的
上下标元素是以sup元素定义的

<body>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit.</b> Accusamus at autem deleniti, dolor eos modi nihil <i>recusandae vel. Aspernatur beatae blanditiis, <i>ea fugiat maxime neque nobis non sequi veritatis vero.</p>
<p>E=MC<sup>2</sup>公式</p>
<p>H<sub>2</sub>0</p>
<hr><!--分割线-->
</body>

4.换行符与水平线；换行是以br元素定义的，水平线是以hr元素定义的
5.空白元素；是以p元素定义的，两个空格以上的，只显示一个空格

<body>
<!--空白折叠
浏览器只识别一个空格，多个空格的话，只识别一个空格-->
<p>爱     新觉罗</p>
</body>

语义化元素:

<body>
<strong>呼延觉罗</strong>呼延觉罗
<!--strong元素加粗元素-->
<em>呼延觉罗</em>呼延觉罗
<!--em元素表示强调元素-->
<br><!--换行-->
<blockquote>
    <p>东北三省又称“东三省”，为东北清朝末年以后的三个行政区，与地理文化上的东北地区没有关系</p>
</blockquote>
<!--blockquote元素表示引用元素，缩进效果-->
<p>说明:<q>声明不是一个HTML</q></p>
<!--<q>引用元素 - 添加双引号-->
<p><cite>东北三省又称“东三省”</cite>为东北清朝末年以后的三个行政区，与地理文化上的东北地区没有关系</p>
<!--<cite>引文元素 - 斜体效果-->
<br>
<p><dfn>东北三省又称“东三省”</dfn>为东北清朝末年以后的三个行政区，与地理文化上的东北地区没有关系</p>
<address>
    <p>东三省</p>
    <p>吉林省吉林市</p>
</address>
</body>

内容修改元素；以ins表示带有下划线的文本
以del表示带有删除线的文本

<body>
<p>东北 <del>三省</del> 又称 <ins>东三省</ins></p>
</body>

字体样式:

字体系列；以font-family表示

 <style>
        h2, p {
            /*备选字体，是以用户电脑中已安装的字体
            必须是用户电脑已存在的字体
            一般可选的字体数量不是很多
            一次性指定多个字体系列 - 中间使用逗号分隔
            */
            font-family: 新宋体, sans-serif;
        }
    </style>

字体大小；是以font-size用于设置字体大小

 <style>
        h2, p{
            font-family: 新宋体, sans-serif;
        }
        P{/*一般使用像素值（px）
        百分值：浏览器默认字体大小为（16px）=100%*/
            /*font-size: 200%;表示浏览器默认字体的2倍*/

            font-size: small;
        }
    </style>

粗体；是以font-weight用于设置字体粗细程度

<style>
        h2, p{
            font-family: 新宋体, sans-serif;
        }
        p{
            font-size: 200px;
            font-weight: 900;/*表示页面字体加粗*/
            font-style: oblique;/*表示斜体*/
        }
    </style>

4.font属性；是可同时设置字体的样式

    <style>
        p {
            /* 定义样式的顺序是固定的 - 建议使用这种简写属性 */
            font: bold italic large serif ;
        }

    </style>
</head>
<body>
<h1>呼延觉罗</h1>
<p>爱新觉罗</p>
</body>

二。文本样式:

文本装饰；

 <style>
        p {
            /* text-decoration提供下划线、上划线及删除线 */
            text-decoration: line-through lightcoral dashed;

            /*
                text-decoration-line: 表示提供的下划线、上划线及删除线
                text-decoration-color: 表示线的颜色
                text-decoration-style: 表示线的样式
             */
            /*text-decoration-line: underline;
            text-decoration-color: lightcoral;
            text-decoration-style: dashed;*/
        }
    </style>
</head>
<body>
<p>爱新觉罗</p>
</body>

行间距；

<style>
        span{
            line-height: 50px;/*表示垂直文本的距离大小*/
        }
    </style>
</head>
<body>
<span>呼延觉罗</span>
<br>
<span>爱新觉罗</span>
</body>

字母间距和单词间距；

<style>
        #q1 {
            letter-spacing: 10px;
        }
        #q2 {
            word-spacing: 10px;
        }
        #q3 {
            /* 字母间距允许设置汉字之间的距离 */
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
<p id="q1">aixinjueluo</p>
<p id="q2">front end dev</p>
<p id="q3">爱新觉罗</p>
</body>

水平对齐方式；

<style>
        /* 水平方向对齐方式默认 - 左对齐 */
        #p1 {
            text-align: right;
        }
        #p2 {
            text-align: center;
        }
        #p3 {
            text-align: justify;
        }
    </style>
</head>
<body>
<p>爱新觉罗</p>
<p id="p1">爱新觉罗</p>
<p id="p2">爱新觉罗</p>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam aut facere fugit ipsa iste laboriosam natus nulla, </p>
</body>

垂直对齐方式；

<style>
        /* 垂直方向对齐方式默认 - 底部对齐 */
        img {
            /* 设置图片以什么方式与文字对齐 */
            vertical-align: top;
        }
    </style>
</head>
<body>
<p>Lorem ipsum <img src="imgs/frame_image.svg"> dolor sit amet, consectetur adipisicing elit. </p>
</body>

【静态页面架构】CSS之颜色与单位

CSS架构

佐珥玎

引用和评论

【Ajax】之jQuery中的Ajax

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式