网页美容师

1.

         css========cascading    style  sheets 美化样式

         ----内部样式

         ----行内样式

          ----外部样式

 

2.内联样式 又称行内样式

      <标签名    style="属性1:属性值1; 属性2:属性值2; "> 内容 </标签名>

         作用范围:当前以及子标签起作用

 3.     外部样式表

                 实际工作开发中以此为主

                  链入式是将所有样式放在一个或多个.css为扩展名的外部样式表文件中

 

                通过link标签将外部样式文件链接到html文档中,其基本语言格式如下:

              

<head>
   <link href="css文件的路径" type="text/css" rel="style.sheet">  
</head>

 

1.单标签   2.必须在head头部标签中 3.必须指明3个属性

 

 

四.内部样式表

 

<head>
    <style>
    选择器{属性:值}
    </style>
</head>

 

       选择器是用于选择标签的

五.项目格式

项目1======html

                       css 文件  .style.css

          

              web工程 包括  css文件夹,images文件夹,js文件夹,index.html文件夹

 

 

六.

 

选择器

                     h1{  color:red;

                            font-size:25px;

                           } 

 

1.选择器用于指定 css样式作用的html对象

2.属性以k-v的形式设置样式属性,字体大小,文本颜色等

3,之前以;相连接

 

 

1.标签选择器(元素选择器)

 

       可以将某一类标签全部选择出来,但不可差异化选择

 

2.类选择器

        上面用点声明,下面calss调用

                .suibian{

                      color:blue;

                      }

     

 

        <div  class="suibian"> 我是类选择器 </div>

 

1.长名称或者词组 可以使用中横线来为选择器命名

2.不建议使用"-"下划线来命名css选择器

尽量使用英文命名,

 

类选择器可以为一个或多个标签命名

 

命名手册------css2命名规范

 

 

 

 

七

多类名选择器 

         在一个标签中仅有一个class属性

因此常用的写法为:

.red{
      color:red;

}

.font{
     font-size:20px;

}

<div class="red    font" >  多类型选择器      </div>

特性:

1.显示效果跟html元素中的类名先后顺序没有关系;受css样式书写的上下顺序有关;.后来者居上

2.各个类名中间用空格

 

八.id选择器和通配符选择器

 

     id选择器 

#last{
     color:pink;
}

<div id="last">id选择器</div>

特点:

类型可以一样,但是id只能一个标签拥有一个全局唯一

 

w3c标准规定,在同一页面内,不允许有相同名字的id对象出现,单允许拥有相同名字的class

 

通配符选择器

*{
color:pink;

}

实际开发中 用于页面样式初始化

 

实际开发中类选择器使用很多.id选择器使用很少

 

九.css3样式属性

 

1.学会控制样式

2.学会画盒子,明白标签即是样式

 

 

font-size

字体大小

em字体尺寸,px像素单位,in英寸,cm厘米,mm毫米,pt点

font-family

字体样式

网页中常用字体"微软雅黑"注意商用字体需要收费

font-weight

字体加粗

bold或者number为700       normal或者number为400

font-style

字体风格

normal正常     italic 斜体很少使用

 

 

 

 

 

其中:font-family要特别注明:

                     1.可以同时使用多个字体,中间以逗号隔开,如果浏览器不支持第一个字体,则尝试下一个

                      2.网页中字体普遍使用14px

                      3.尽量使用偶数的数字字号,i e等老浏览器使用奇数可能会有bug

                      4.使用英文逗号隔开字体之间                 

                    5.字体名包含 , # $ 等必须使用'  '  单引号或者双引号  

 

英文名 中文名称 unicode 编码 一般浏览器均支持

 

字体连写 

选择器{
     font: font-style  font-weight  font-size/line-hight  font-family;       

}

使用font属性必须按照这个语法顺序书写,不能更换顺序,以空号隔开;

 

十.css外观属性

             color:文本颜色

            1.预定义颜色 red,green,biue等

             2.十六进制 如#F0000,#FF6600等

          3.rgb代码

 

          line-height行间距

                          行高     单位-------像素px-------工作中最常用

                                                       相对值  ex

                                                        百分比%

 

                        一般比字号     大七八个像素

 

                 text-align:水平对齐方式

                                                 /设置文本内容的水平对齐方式     是让标签中的内容居中对齐,而不是标签居中对齐

                         left 左对齐

                         ringht 右对齐

                         center   居中对齐

                text-indent:首行缩进

 

                               text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值em 字符宽度的倍数,或者相对于浏览器窗口宽度的百分比,允许使用负值

 

                       em是一个汉字的宽度,   em进行单位设置

 

 

                 text-decoration文本的修饰

 

            参数 none :无修饰

              blink:闪烁

              underline:下划线

              overline:上划线

              line-through:下划线

 

对比:

 

    

倾斜

em或者i

font-style:normal    itatic

下划线

u    ins

text-decoration

删除线

s   del

text-decoration

加粗线

b    strong

font-weight:normal     400     bord  700

 

 

 

十一.调试工具

 

 

开发者工具 F12的使用

 

                           

前端(三)-----css入门_css

 

会有 html文件和 css文件

 

十二.复合选择器

 

11.1后代选择器

 

 

div  p{




   color:pink;//后代选择器



}
//类选择器    标签

.houdai    p{   




    color:pink;



}

 

11.2子代选择器

 

ul  li > a{
                 //子代选择器     子 只对亲儿子才生效

  color:pink;


}

子代选择器 只对亲儿子才生效,对孙子并不生效

 

子代选择器  用大于号>分割

 

11.3 交集选择器

div.red{



color:pink


}


<div   class="red" > 交集选择器</div>

<p   class="red" > 交集选择器  取不到</div>

 

标签名  . 类名 

 

既又

 

 

 

 

 

11.4 并集选择器

 

div , span{
                   //并集选择器

   color:pink;


}

 

, 取并集

 

 

11.5伪类选择器

 

         伪类选择器======向某些选择器标签添加特殊效果

 

           类      .one

         伪类     :link

       伪元素     ::

 

          :link   未访问的链接

          :visited   已访问的链接

         : hover    鼠标移动到该链接

         ::active   选定的链接

    love  hate  爱上讨厌     

 

    

a:link{


//未访问过的链接状态
color: #3c3c3c;

font-size:25px;

font-decoration:none;//取消下划线


}

十二.实际开发中的快捷方式

 

            1.div >p

            2.li*5

            3.input:radio