CSS

CSS

css引入样式

1.内联

css 1.内联 <h1 style="color: red">我是标题</h1>

2.内部

<style>
    h1{
        color: green;
    }
</style>

3.外联

h1{
    color: yellow;
}

<!-- 链接式 -->
<link rel="stylesheet" href="css/style.css">

<!-- 导入式 -->
<style>
    @import url("css/style.css");
</style>

优先级：行内样式>内部样式>外部样式

选择器

类选择器：class=" "

Id选择器： id=" " 全局唯一

标签选择器：a{}

优先级： id>class>标签

选择器

/*类选择器*/
/*
    属性名 = 属性值
    =绝对等于
    *=包含
    ^=以这个开头
    $=以这个结尾
*/

/*class中有item的元素*/
a[class="item"]{
    background: antiquewhite;
}

/*选中href中以www开头的元素*/
a[href^=www]{
    background: antiquewhite;
}

<a href="www.baidu.com" class="item">超链接</a>

CSS字体属性

CSS伪类

选择器 : 伪类名 { 属性 : 属性值 }

<style type="text/css">
    /*取消超链接下划线*/
    a { text-decoration:none;}
    /*超链接样式*/
    a:link    { color: blue;}
    /*点击过的样式*/
    a:visited { color: purple;}
    /*悬停时的样式*/
    a:hover   { color: red;}
    /*点击时的样式*/
    a:active  { color: yellow;}
</style>

<a>没有href的a标签,字体没有修饰，鼠标放上去也没反应</a> </br>

<a href="#" target="_blank"> href为#的a标签，默认蓝色，带下划线，鼠标放上去变成手 </a> </br>

<a href="http://www.a.com" target="_blank" >href为网址的a标签，效果同上</a>

字体

/*悬停时的样式*/
a:hover {
    color: red;
    font-size: 20px;
}

透明度

img
{
  opacity:0.4;
  /* filter:alpha(opacity=40); */ /* IE8 及其更早版本 */
}

 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。