zoukankan      html  css  js  c++  java
  • css基础

    CSS基本样式

    注意:

    1. css样式文件和html文件的编码格式一致,CSS样式中某些中文属性值才能正常生效
    2. 中文有中文字体,英文有英文字体,两种字体互不生效
    3. 字体样式属性值中斜体是选用斜体字体,如果字体中没有斜体字体就应该选用倾斜属性值来倾斜字体

    字体样式

    font-family  字体类型  font-family:“隶书”;

    font-size   字体大小  font-size:12px;

    font-style   字体风格  font-style:italic;

    font-weight  字体粗细  font-weight:bold;

    font     在一个声明中设置所有字体属性  font:italic bold 12px "隶书";

    选用两种字体:

    font-family:cursive,a,b,c,"微软雅黑";

    系统从前往后筛选字体,英文的字体写在中文的字体前面,否则可能不起作用

    字体样式的简写形式

    font:多个属性;  有规定顺序

    font:italic 25px cursive,“微软雅黑”;

    文本样式

    color       设置文本颜色      color:#00C;
    text-align     设置元素水平对齐方式  text-align:right;
    text-indent:(em是设置缩进多少字节的单位)  设置首行文本的缩进   text-indentL20px;
    line-height    设置文本的行高     line-height:25px;
    text-decoration  设置文本的装饰     text-decoration:underline;

    CSS注释:/*  */

    CSS选择器:

    选择器{

      属性:值;

      属性:值;

    }

    标签选择器:选择器写法和标签一致,如果有个别标签不想使用这个样式则不能使用标签选择器

    h1{

      font-size:22px;

    }

    类选择器:

    .red{

      color:red;

    }

    <h1 class="red"></h1>

    ID选择器:

    #green{

      color:#00ff00;

    }

    <p id="green"></p>

    CSS样式用法:

    内联样式:<h1 style="font-size:22px;color:red;"></h1>

    内部样式表:页面内css样式表写在<head><style></style></head>中(内部样式表,作用范围为本页面)

    外部样式表: *.css文件,由<link/>标签引入,<link href="img/divcss5.css" rel="stylesheet" type="text/css" /> 

    外部样式表的引入方法:

    链接式:

    <link href="img/divcss5.css" rel="stylesheet" type="text/css" /> 

    导入式:

    <style>

      @import "css/types.css";

    </style>

    优先级:

    ID选择器>类选择器>标签选择器

    内联样式>内部样式>外部样式(就近选择)

    选择器样式之间的关系是覆盖而不是替换

    CSS伪类

    设置超链接:

    a:link     未单击访问时超链接样式

    a:visited    单击访问后超链接样式

    a:hover    鼠标悬浮其上的超连接样式

    a:active    鼠标单击未释放的超链接样式

    a:hover{

      color:#B46210;

      text-decoration:underline;

    }

    css设置鼠标形状

    default  默认光标

    pointer  超链接的指针

    wait    是等待的效果

    help    指示可用的帮助

    text    指示文本

    crosshair  鼠标呈现十字状

    span{

      cursor:pointer;

    }

    背景颜色:background-color:#B70447

    背景图像

    -图像路径:background-image:url(img/buy.png);

    -重复方式:background-repeat:no-repeat;

    -背景定位:background-position:10px 15px;

  • 相关阅读:
    内存对齐
    C++中构造函数
    计算机视觉领域的大牛主页
    各种银行卡的收费情况
    常识
    毕业生必须知道
    计算机视觉领域资料
    人际关系
    生活常识
    可使用在项目的web gantt甘特图有哪些?
  • 原文地址:https://www.cnblogs.com/lgqblog/p/10208031.html
Copyright © 2011-2022 走看看