• css.day01


    1.CSS 初步认识

    web 标准

    w3c

     结构   xhtml    table  p  hr  br   td    img  a  

     表现   CSS 

    CSS 最大的好处  就是让  结构和表现   实现了分离

    CSS  就是层叠样式表   

    所以我们为什么要学习CSS

    注意: 以后的代码标签的属性值,就全部放到 CSS里面了。

    <table width=500>

    <table>

    2.CSS 语法规范 

    格式: 选择器 属性: 值;}

    例如: p{colorred}

    解析:

    选择器:说到底目的是  选定某个标签用的。(给谁改样式)

    几点要求:

    1.首先还是采取键值对的格式,但是,属性和值之间用冒号隔开。

    2.每个键值对 结束用分号表示。

    3.键值对都是包含在一对大括号内的。

    4.键值对可以有多组。(用分号隔开)

    5.font-size:12px;  字体大小用font-size  一般情况下所有数字带单位(px

    0除外  0后面不要跟单位。

    3.CSS的位置分类

      1.行内样式表

      行内样式表写在标签内部。格式如下:

      <p style=” color:red ;”></p>

      这种情况尽量少用。一般适合于很少情况下。或者为了提高权重,因为行内样式表的权重最高。

      2.内嵌样式表

      内嵌样式表 写在html文件内,放在<head></head> 之间 ,几乎都是贴着</head>上方 

      格式如下: 

      <style type=”text/css”>
         p{color:red;}
     </style>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
         ul{font-size:12px; color:red;}
       div{font-size:14px; color:#03C;}
    </style>
    </head>
    <body>
    <p> </p>
    <p> </p>
    <p> </p>
    <div> </div>
    <div> </div>
    <ul> </ul>
    <dl></dl>
    </body>
    </html>

      3.外部样式表  

      外部样式表写在站点内部。单独新建一个CSS 文件  (css文件的后缀名是.CSS  

      可以通过 链接  或者 导入的方式 进入到 html 页面中。

      第一链接方式:

    <title>无标题文档</title>
    <link rel="stylesheet" href="link.css" type="text/css" />
    </head>
    

      link这个语句也是放到 </head> 的上方

      好处: 

        1. 页面的加载速度快

        2. 可以控制多个页面

         3. 统一修改方便。

      第二 导入样式表 (相对较少,不提倡用)

        是把一个CSS 文件 导入的到另外一个CSS 文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>规范</title>
    <style type="text/css">
     @import url(link.css);
    </style>
    </head>
    <body>
    <p></p>
    <p></p>
    <p></p>
    <div></div>
    <div></div>
    <ul></ul>
    <dl></dl>
    </body>
    </html> 

      1. 行内样式表

      权重最高 但是只能控制一个标签样式

         2. 内嵌样式表

      权重其次  但是可以控制整个页面 样式 

         3.外部样式表 (链接式  导入式)

      权重最低   但是可控制 整个站点(网站)的文件样式

    4.网页显示模式

     

      不同元素有不同的显示方式

      1.块级显示模式

      代表: div  p  li   ul  ol  dl ...

      特点

        1. 自己单独占一行 (比较霸道) 自上而下 显示  

        2. 可以设置高度和宽度 

        ps: 给盒子指定了 宽 高  背景之后 就可以显示实体 ,我们称之为 实体化

      2.行内显示模式

      代表:span   font   b  i  em  a ....

      特点:

        1. 一行内显示。自左往右显示。

        2. 不能设置宽和高。

      3.行内块显示模式

      没有标签是这种显示模式。

      先空着

      给标签使用 : display:inline-block; 转换成行内块显示模式。

      特点:既有行内 一行内显示  又有 块级的宽和高。

    5.显示模式之间的相互转换

      块级显示模式可以转换成行内显示模式:  display 显示  display: inline;

      行内显示模式转化为 块级显示元素:  dispaly:block;

    6.Css 选择器(选择符)分类

      css  基础选择器

      css  复合选择器

      先看基础选择器:

      1.类选择器     ”   .  来定义   class 来引用

        注意:

          1.必须以 点 开头  不能省略。

          2.后面类的名字 不要用 标签名 不要以数字开头  更不能纯数字

          3.上面定义,下面使用, class=”类名”  class=”lan”      

          font-weight:bold  css 字体加粗   bold  =  700   等价  

      2.ID选择器   # 来定义    id 来引用

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

        1.class  选择器   多次使用  没有限制

        2.id 选择器   用且仅用一次  唯一的

        id 要比 class 执行速度快很多  

      3.标签选择器   

      注意:CSS写法

      text-align:center   文本居中对齐

      text-indent:2em;  首行缩进2个字 

      em 是一个相对单位  1em 就是一个字的距离

      line-height: 25px;  行高 

      letter-spacing:1px  字间距 

    7.CSS  层叠性  继承性  优先级

      1.层叠性

        CSS  层叠样式表    

        层叠性: 就是后面的标签样式会覆盖原先标签样式。(后来居上)远亲不如近邻  优先执行最近的标签样式青出于蓝而胜于蓝 

      2.继承性

      龙生龙  凤生风  老鼠生的孩子会打洞 子级标签会大部分继承父级标签的样式。(一般文字元素的样式都会继承)

      3.优先级

      外部样式表 内嵌样式表  行内样式表

      标签选择器类选择器  <  id 选择器 行内样式表

      1          10           100          1000

      class 里面可以放多个类名:

      格式是: class=”类名1   类名2”

      版权之类的符号: 必须用font-family:Arial; 特殊声明 

      倾斜 em  改成正常字体 : font-style:normal

      加粗 strong 改成正常字体    font-weightnormal

    转载请注明出处

  • 相关阅读:
    整理用js实现tab标签页
    整理悬浮在列表中a元素时改变a元素上下边框颜色的问题。
    整理Javascript基础数据和引用数据复制值的问题
    这一周的学习整理
    关于变量作用域的一点整理
    Javascript 知识遗漏点梳理。
    安卓自定义TextView实现自动滚动
    解决 IntelliJ IDEA Tomcat 控制台中文输出乱码问题
    Tomcat 控制台UTF-8乱码问题
    java 实现hex文件转换bin保存至内存中
  • 原文地址:https://www.cnblogs.com/brittany/p/4787727.html
Copyright © 2020-2023  润新知