css day1

时间:2019-08-22
本文章向大家介绍css day1，主要包括css day1使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

基础知识

   css:层叠样式表

   以html为基础，提供丰富的功能，如字体、颜色、背景的控制及整体排版

   css中只有（冒号）：  没有（等于号）=

css样式规则

   1.选择器用于指定css样式作用的html对象，花括号内是对该对象设置的具体样式

   2.属性和属性值以“键值对”的形式出现

   3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

   4.属性和属性值之间用英文“:”连接

   5.多个“键值对”之间用英文“;”进行区分

   在<head></head>中添加<style></style>

       <!DOCTYPE html>

       <html lang="en">

       <head>

           <meta charset="UTF-8">

           <style>

               h1 {

                   color:orange;

                   font-size:20px;

               }

           </style>

       </head>

       <body>

           <h1>css基础实验</h1>

       </body>

       </html>

字体样式属性

color

       颜色

font-size

       字号大小,可以使用相对长度（较常用，推荐使用）或绝对长度

           相对长度

               em：相对于当前对象内文本的字体尺寸

               px：像素，最常用，推荐使用

           绝对长度

               in：英寸

               cm：厘米

               mm：毫米

               pt：点

font-family

       字体，网页中常用的有宋体、微软雅黑、黑体等

       1.网页中普遍使用14px+，默认是16px

       2.尽量使用偶数的数字字号，ie6等老式浏览器奇数会后bug

       3.各种字体之间必须使用英文的,隔开

       4.中文字体需要加英文状态下的引导时，英文字体一般不需要加引号，英文字体名必须位于中文字体名之前

       5.如果字体中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family："Times new Roman";

       6.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示

CSS Unicode

       字体：可以又进制码表示

           字体名称    英文名称        Unicode编码

           宋体        SimSun          \5B8B\4F53

           新宋体      NSimSun         \65B0\5B8B\4F53

           黑体        SimHel          \9ED1\4F53

           微软雅黑    Microsoft YaHei \5FAE\8F6F\96C5\9ED1

           楷体_GB2312 KaiTi_GB2312    \96B6\4E66

           隶书        LiSu            \96B6\4E66

           幼圆        YouYuan         \5E7C\5706

           华文细黑    STXihei         \534E\6587\7EC6\9ED1

           细明体      MingLiU         \7EC6\660E\4F53

           新细明体    PMingLiU        \65B0\7EC6\660E\4F53

           例子：font-family: "\5E7C\5706"

font-weight

       字体粗细

       属性：normal、bold、bloder、lighter、100~900（100的整数倍）

                   400等价于blod，700等价于blod

font-style

       字体风格,例子：斜体、倾斜、正常

       属性：normal（默认标准样式）、italic（斜体）、oblique（倾斜）

font

       综合设置字体样式

       选择器 {font: font-style  font-weight  font-size/line-height  font-family}

           1.使用font时，必须按照上面的语法格式的顺序书写，不能更换顺序，各个属性之间用空格隔开

           2.其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

               font: italic blod 16px "微软雅黑"

css注释

   /*   */

   快捷键：Ctrl+/

选择器

类选择器

单类名选择器

       使用“.”（英文点号）进行标识，后面跟类名

       优点：为元素对象定义单独或相同的样式

       基本语法格式

           .类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；···}

           标签调用时用<class="类名">即可

           不要用数字和汉字定义类名，最好见名知意

               <html>

                   <head>

                       <style>

                           .laowang1 {     /*声明类样式*/

                               color:orange;  

                           }

                           .laowang2 {

                               font-size="微软雅黑"

                           }

                           #laowang3 {     /*ID选择器*/

                               front-style：normal

                           }

                       </style>

                   </head>

                   <body>

                       <div class="laowang1">老王1</div>        /*引用类样式*/

                       <div class="laowang1 laowang2">老王2</div>

                       <div id="laowang3">老王3</div>

                   </body>

               </html>

多类名选择器

           类名排序没有先后顺序

           各个类名之间用空格隔开

           <div class="laowang1 laowang2">老王2</div>

ID选择器

       用#表示

       #laowang3 {     /*ID选择器*/

           front-style：normal

       }

       <div id="laowang3">老王3</div>

类选择器和ID选择器的区别

       W3C规定，在同一个页面内，不允许有相同名字的id对象出现，但允许相同名字的class

       类选择器好比人的名字，可以多次重复使用

       ID选择器好比人的身份证号码，是唯一的，不可重复

通配符选择器

       用*表示，是所有选择器中作用范围最广的，能匹配页面中的所有元素

       * {属性1：属性值1；属性2：属性值2；属性3：属性值3；···}

           清除所有html默认边距

           * {

               margin：0       /*定义外边距*/

               padding:0       /*定义内边距*/

           }

伪类选择器

   用：表示

   用于向某些选择器添加特殊效果

       链接伪类选择器

           link（常用）：未访问的链接

           visited：已访问的链接，已经点击过一次

           hover（常用）：鼠标移动到链接时发生的变化

           active：选定的链接，按住鼠标不放开的状态

           注意：尽量不要颠倒顺序，lvha

               a:link {

                   font-size:16px;

                   color:blue;

               }

           简写方式

               a {    /*a表示标签选择器*/

                   font-size:16px;

                   color:blue;

               }

结构伪类选择器

           first-child：选取属于其父元素的首个子元素的指定选择器

           last-child：选组属于其父元素父最后一个子元素的指定选择器

           nth-child（n可以从0开始）：选取属于其父元素的第N个子元素，不论元素的类型，even/2n表示偶数，odd/2n+1表示奇数

           nth-last-child：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计算，n可以是数字、关键词或公式

               <style>

                   li:first-child{

                       color:red

                   }

               </style>

               <style>

                   li:nth-child(odd){      /*选择奇数*/

                       color:red

                   }

               </style>

目标伪类选择器

           :target

           选取当前活动的目标元素

基础知识    css:层叠样式表    以html为基础，提供丰富的功能，如字体、颜色、背景的控制及整体排版    css中只有：  没有=
css样式规则    1.选择器用于指定css样式作用的html对象，花括号内是对该对象设置的具体样式    2.属性和属性值以“键值对”的形式出现    3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等    4.属性和属性值之间用英文“:”连接    5.多个“键值对”之间用英文“;”进行区分
    在<head></head>中添加<style></style>        <!DOCTYPE html>        <html lang="en">        <head>            <meta charset="UTF-8">            <style>                h1 {                    color:orange;                    font-size:20px;                }            </style>        </head>        <body>            <h1>css基础实验</h1>        </body>        </html>
字体样式属性    color        颜色    font-size        字号大小,可以使用相对长度（较常用，推荐使用）或绝对长度            相对长度                em：相对于当前对象内文本的字体尺寸                px：像素，最常用，推荐使用            绝对长度                in：英寸                cm：厘米                mm：毫米                pt：点    font-family        字体，网页中常用的有宋体、微软雅黑、黑体等        1.网页中普遍使用14px+，默认是16px        2.尽量使用偶数的数字字号，ie6等老式浏览器奇数会后bug        3.各种字体之间必须使用英文的,隔开        4.中文字体需要加英文状态下的引导时，英文字体一般不需要加引号，英文字体名必须位于中文字体名之前        5.如果字体中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family："Times new Roman";        6.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示    CSS Unicode        字体：可以又进制码表示            字体名称    英文名称        Unicode编码            宋体        SimSun          \5B8B\4F53            新宋体      NSimSun         \65B0\5B8B\4F53            黑体        SimHel          \9ED1\4F53            微软雅黑    Microsoft YaHei \5FAE\8F6F\96C5\9ED1            楷体_GB2312 KaiTi_GB2312    \96B6\4E66            隶书        LiSu            \96B6\4E66            幼圆        YouYuan         \5E7C\5706            华文细黑    STXihei         \534E\6587\7EC6\9ED1            细明体      MingLiU         \7EC6\660E\4F53            新细明体    PMingLiU        \65B0\7EC6\660E\4F53            例子：font-family: "\5E7C\5706"    font-weight        字体粗细        属性：normal、bold、bloder、lighter、100~900（100的整数倍）                    400等价于blod，700等价于blod    font-style        字体风格,例子：斜体、倾斜、正常        属性：normal（默认标准样式）、italic（斜体）、oblique（倾斜）    font        综合设置字体样式        选择器 {font: font-style  font-weight  font-size/line-height  font-family}            1.使用font时，必须按照上面的语法格式的顺序书写，不能更换顺序，各个属性之间用空格隔开            2.其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用                font: italic blod 16px "微软雅黑"css注释    /*   */    快捷键：Ctrl+/选择器    类选择器        单类名选择器        使用“.”（英文点号）进行标识，后面跟类名        优点：为元素对象定义单独或相同的样式        基本语法格式            .类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；···}            标签调用时用<class="类名">即可            不要用数字和汉字定义类名，最好见名知意                <html>                    <head>                        <style>                            .laowang1 {     /*声明类样式*/                                color:orange;                             }                            .laowang2 {                                font-size="微软雅黑"                            }                            #laowang3 {     /*ID选择器*/                                front-style：normal                            }                        </style>                    </head>                    <body>                        <div class="laowang1">老王1</div>        /*引用类样式*/                        <div class="laowang1 laowang2">老王2</div>                        <div id="laowang3">老王3</div>                    </body>                </html>        多类名选择器            类名排序没有先后顺序            各个类名之间用空格隔开            <div class="laowang1 laowang2">老王2</div>    ID选择器        用#表示        #laowang3 {     /*ID选择器*/            front-style：normal        }        <div id="laowang3">老王3</div>    类选择器和ID选择器的区别        W3C规定，在同一个页面内，不允许有相同名字的id对象出现，但允许相同名字的class        类选择器好比人的名字，可以多次重复使用        ID选择器好比人的身份证号码，是唯一的，不可重复    通配符选择器        用*表示，是所有选择器中作用范围最广的，能匹配页面中的所有元素        * {属性1：属性值1；属性2：属性值2；属性3：属性值3；···}            清除所有html默认边距            * {                margin：0       /*定义外边距*/                padding:0       /*定义内边距*/            }伪类选择器    用：表示    用于向某些选择器添加特殊效果        链接伪类选择器            link（常用）：未访问的链接            visited：已访问的链接，已经点击过一次            hover（常用）：鼠标移动到链接时发生的变化            active：选定的链接，按住鼠标不放开的状态            注意：尽量不要颠倒顺序，lvha                a:link {                    font-size:16px;                    color:blue;                }            简写方式                a {    /*a表示标签选择器*/                    font-size:16px;                    color:blue;                }        结构伪类选择器            first-child：选取属于其父元素的首个子元素的指定选择器            last-child：选组属于其父元素父最后一个子元素的指定选择器            nth-child（n可以从0开始）：选取属于其父元素的第N个子元素，不论元素的类型，even/2n表示偶数，odd/2n+1表示奇数            nth-last-child：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计算，n可以是数字、关键词或公式                <style>                    li:first-child{                        color:red                    }                </style>                <style>                    li:nth-child(odd){      /*选择奇数*/                        color:red                    }                </style>        目标伪类选择器            :target            选取当前活动的目标元素外观属性

原文地址：https://www.cnblogs.com/oldwangcy/p/11396444.html

随机文章
WEB前端知识点必读
最近更新