码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2020-02-18 18:16:44      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:body   大写   eve   开头   字体样式   weight   设置   选中   round   

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字体属性

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

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。值越小,使得元素更加透明。

CSS

标签:body   大写   eve   开头   字体样式   weight   设置   选中   round   

原文地址:https://www.cnblogs.com/gyhbk/p/12327223.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!