css day1

天大地大妈咪最大 提交于 2019-11-28 06:08:14

基础知识

   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            选取当前活动的目标元素外观属性

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!