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;

  • 相关阅读:
    javascript:getElementsByName td name
    C# 批量复制文件
    笨笨图片批量下载器[C# | WinForm | 正则表达式 | HttpWebRequest]
    浩方魔兽"去"小喇叭终极解决方案[Warcraft III]
    JavaScript——DataListBox(组合框)
    PowerDesigner 12 根据名称生成注释(完整示例)
    笨笨图片批量抓取下载 V0.2 beta[C# | WinForm | 正则表达式 | HttpWebRequest | Async异步编程]
    使用IHttpHandler做权限控制[ASP.NET | IHttpHandler | AjaxPro | UserHostName]
    AjaxPro 未定义错误
    北京有趣地名(二)
  • 原文地址:https://www.cnblogs.com/lgqblog/p/10208031.html
Copyright © 2011-2022 走看看