css小总结

最新推荐文章于 2024-10-14 09:20:17 发布

kkongyu

最新推荐文章于 2024-10-14 09:20:17 发布

阅读量216

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/ting_163/article/details/73581524

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

A:Css的使用方式:

1:内部样式
    <a href="xxx.html" style = "font-size:12px; color:#F00;">超链接</a>

    弊端:和标签的其他属性混合在一起,不利于维护

2:内部样式
    head标签体写:style标签

    <style type = "text/css">
        书写样式;
    </style>

    弊端:内部样式和html混合在一起,也不利于维护

3:外部样式(推荐)
    开发步骤:
        1>:建立一个独立的以.css为后缀名的css文件
        2>:在head标签体写一个 link标签:导入外部css文件
        3>两个属性:href:链接到的css文件
                   rel:关联:属性值为:stylesheet
    <link href="xxx.css" rel = "stylesheet" />

D:Css的属性:

1:Css文本
    color:设置字体颜色
    letter-spacing:字符间距
    text-decoration:文本修饰
            常用的值:
                    underline:下划线
                    overline:上划线
                    line-through:中划线(购物商城中原价:中划线;)
    word-spacing:单词间距

2:Css字体
    font-family:设置字体的类型:如果系统找不到你要设置的字体:那么默认是宋体
    font-size:字体的大小
    font-style:字体的样式:
            nomarl(默认的)
            italic(斜体)
    font-weight:字体的粗细程度
        normal(默认的粗细程度)
        bold:适当的给字体进行加粗

    font简写属性:将所有针对字体的属性声明一起(几个属性之间用空格隔开)
    font:font-style(italic) font-weight(粗细程序:bold) font-size(字体大小) font-family(字体的类型:"宋体");
    html:超文本标记语言:
        特点:松散性

3: Css背景
    <style type="text/css">
        body{
            /*设置背景颜色*/
            /*
            background-color:#0FF;
            */
            /*设置背景图片*/
            /*
            background-image:url(../%E7%B4%A0%E6%9D%90/mm.jpg); 
            */  
            /*设置背景图片是否重复,以及如何重复
            常用的几个值:
                    no-repeat:不重复
                    repeat-x:x轴重复
                    repeaty-y:y轴重复
                    repeat:x轴和y轴都重复 
            */
            /*
            background-repeat:no-repeat;
            */
            /*设置背景图片的起始位置*/
            /*
            background-position:top left;
            */
            /*background的简写属性
            是顺序:
                设置背景颜色
                设置背景图片
                设置背景图片是否重复以及如何重复
                设置背景图的起始位置(参数一:top center bottom;参数二:left center right)
            */
            background:#0F0 url(../%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center ;
    </style>

4: Css列表属性
    <style type="text/css">
    ul{
        /*设置列表项标记的类型*/
        list-style-type:none;       
        /*自定义设置列表标记的类型:将列表项标记的类型设置为自定义的图片*/
list-style-image:url(../%E7%B4%A0%E6%9D%90/start.jpg);
}
</style>

5: Css表格
    <style type="text/css">

            table{
                    /*表格中的边框合并*/
                    border-collapse:collapse;       
            }
    </style>

6: Css边框
    <style type="text/css">
    div{    
        /*边框的颜色*/
        /*border-color:简写属性*/

        /*
        border-left-color:#C60 ;
        border-right-color:#00F;
        border-top-color:#F00;
        border-bottom-color:#0F0;
        */

        /*
            1)边框的颜色的默认的顺序:上 右 下 左
            2)如果给某一边边框没有设置颜色,那么会补对边的颜色!
        */
        /*
        border-color:#F00 #00F #0F0 #C60  ;
        */

        /*边框的宽度*/

        /*边框宽度的简写属性*/
        /*
        border-width:10px   ;
        */
        /*
        border-left-width:10px;
        border-right-width:20px;
        border-top-width:30px;
        border-bottom-width:40px;
        */


        /*设置边框的样式
            注意:
                边框想要显示出来,只设置边框颜色,边框宽度不行的,就必须设置边框的样式
            边框的样式中常用的几个值:
            solid:单实线
            dashed:虚线
            dotted:点
            double双实线
        */
        /*
        border-style:solid  ;
        */


        /*直接设置边框的简写属性
            首先:边框的宽度
                边框的样式
                边框的颜色   
        */
        border:5px solid #00F ;
    }
</style>

C: Css选择器:

标签选择器
        <body></body>
        body{
            书写样式....
        }

类选择器:在标签中声明一个属性:class属性
    <a href="xxx.html" class="name">链接</a>
    .name{
        书写样式....
    }
id选择器:在标签中声明一个属性id:指定值(开发中常用)

<div id = "dl">div1的内容</div>
    #dl{
        书写样式....
    }
<div id ="dl">div2的内容</div> :不建议使用同名 id属性

注意:在后面js学习中,如果设置同名id属性,获取id属性值:document.getElementById(“dl”).value;有可能获取不到!

优先级的问题:id选择器的优先级>类选择器>标签选择器

并集选择器:通过类选择/id选择器选中多个标签,每个标签的选择器用逗号隔开
    .name,#dl{
        书写样式....
    }
交集选择器:通过一个选择器选中,中间空格然后是子标签
<div name="ch">div的内容<span>span的内容</span></div>
    .ch span{
        书写样式...
    }
通用选择器:*:代表通配符:所有的
    *{
        书写样式...
    }

伪类选择器:(练习题:鼠标经过表格的每一行(除过表头:变色))
    link:鼠标不经过的状态(鼠标没有访问过的状态)
    hover:鼠标经过的状态
    active:(鼠标激活的状态:鼠标按下,但是没有松开的状态)
    visited:鼠标已经访问过的状态!

    举例:超链接:当鼠标按下并且松开之后,回退到超链接标签,那么鼠标经过,保持之前的状态!

    伪类选择器就规定了四种状态的顺序!
    link ----visited----hover----active (顺序)

D:盒子模型:

盒子定义:
   把html中的每个标签看成一个盒子:盒子的宽度和高度(width和height):决定了盒子容量:(body中的内容)
   内边距(padding):盒子的边框与内容的距离
   盒子的边框:盒子的厚度

kkongyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录