CSS的简单概述

最新推荐文章于 2022-07-21 23:54:44 发布
最新推荐文章于 2022-07-21 23:54:44 发布
阅读量264 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Of_Mine/article/details/79748268
版权

一、CSS的使用方式

1、行内样式

      格式：<HTML 标签 style="样式属性：取值；样式属性：取值；..."><HTML 标签>

      例如：<h1 style="color:orange">标题1</h1>    (不提倡使用）

2、内部样式

     格式：<head>

               <style type="test/css">

                选择器1{样式属性1：取值；样式属性2：取值；...}

                选择器2{样式属性1：取值；样式属性2：取值；...}

                ......

                </style>

                </head>

3、外部样式

      格式：<head>

                        <link rel="stylesheet" type="text/css" href="样式表文件的地址">

                </head>

                    rel="stylesheet"属性用来生明在HTML文件中使用外部样式表。

                    type="text/css"属性用来指明该文件的类型是样式表文件。

                    href="...."属性用来指定样式表文件的路径和名称。

二、CSS的选择器

    1、标签选择器

            <style type="text/css">

            div{
                font-size: 24px;
                color: #f00;
                }

            </style>

            <body>

            <div>div的内容</div>

             </body>

    2、id选择器

            <style type="text/css">

            #div1{
                font-size: 24px;
                color: #f00;
                }

            </style>

            <body>

            <div id=div1>div1的内容</div>

             </body>

    3、类选择器

            <style type="text/css">

            .div2{
                font-size: 24px;
                color: #f00;
                }

            </style>

            <body>

            <div class=div2>div2的内容</div>

             </body>

    4、并集选择器（分组选择器）
            #div1,.divCls,...{
                background-color: #f00;
            }
           (选择器之间用逗号隔开)
    5、交集选择器（包含选择器）
            #div1 span{
            font-size: 24px;
                color: #0f0;    
            }
            (父选择器：#div1 子选择器：span，用空格隔开)

    6、通用选择器:

          *{

            background-color: #f00;

         }

三、伪类选择器

        <style type="text/css">
            没有访问过的状态
            a:link{
                font-size: 24px;
                color: #f00;
            }
            
            鼠标访问过的状态:visited:点击了,并且松开的状态
            a:visited{
                font-size: 24px;
                color: :#FFFFCC;
                text-decoration: none;
            }
            
            鼠标经过的状态:hover
            a:hover{
                font-size: 24px;
                color: #00f;
                text-decoration: none; 文本修饰
            }
            
            鼠标激活状态:active:鼠标点击,但是没有松开的状态
            a:active{
                font-size: 24px;
                color: #0f0;
                text-decoration: underline;
            }
        </style>
   
    <body>
        <a href="01.CSS的选择器.html">超链接</a>
     </body>
          （  锚伪类要循环显示一种效果:四个状态必须有先后循环
            
            提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
 

            提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。）

四、CSS文本

    <style type="text/css">
            
            body{
                
                文本颜色属性:color
                color: #f00;
              
                line-height:行高
                line-height: 60px;
                
                letter-spacing:字符间距
                letter-spacing: 10px;
                
                text-align:文本的对其方式
                text-align: center;
                
                word-spacing:字间距:shu默认两个组成的叫单词
                word-spacing: 10px;
                
                
                 文本修饰
                 text-decoration
                 常用的属性值
                 underline:下划线
                 none:没有下划线
                 overline:上划线
                 line-through:中划线
             
                text-decoration: line-through;

            }

五、CSS字体

    <style type="text/css">
            body{
                 font-family:字体系列(类型)
                 系统默认是宋体
                 font-family: "楷体";
                
                font-size:字体尺寸
                font-size: 24px;
                
                
                font-style:字体的样式
                常用的属性值:
                normal:标准的字体样式
                italic:斜体
                
                font-style: italic;
                
                
                font-wight:设置字体的粗细
                 属性值：bold:适当加粗
                
                font-weight: bold;
                
                CSS字体的简写属性
                font:italic bold 36px "黑体" ;
                
            }
            

        </style>

六、CSS背景

    body{
                背景颜色:background-color
                background-color: #0CF;
                
                
                背景图片:background-image:
                 属性:url指定图片的路径
                
                background-image: url(img/mm.jpg);
                
                background-repeat:设置背景图片是否重复以及如何重复
                常用的属性值:
                             默认值:repeat:x轴和y轴重复
                             repeat-x:背景图片水平方向重复
                             repeat-y:y轴重复
                             no-repeat:不重复
                
                background-repeat: no-repeat;
                
                background-position 设置背景图像的起始位置
                可能用到的属性值
                图片的显示的位置   图片在浏览器中的位置
                                  top            left
                           content            center
                            bottom           right
               
                background-position: top right;
                
                
                CSS背景图片的简写属性

                background: #f00 url(img/mm.jpg) no-repeat top center;                
            }

        </style>

七、CSS列表

    <style>
            body ul{
                list-style-type:设置列表项前面的类型
                list-style-type: none;
                
                给列表项前面的类型自定义
                 list-style-image：
               常用的属性值:URL（） 图像的路径
                
                list-style-image: url(img/start.jpg);
                
            }
        </style>
  
    <body>
        XX学生管理系统:
            <ul>
                <li>学生管理</li>
                <li>选课管理</li>
                <li>教师管理</li>
            </ul>

    </body>

八、CSS表格

    <style type="text/css">
            body table{
              将表格的边框合并为单一的框
              属性值:collapse
                
            border-collapse :collapse;
            }
        </style>
 
    <body>
        <table border="1px"  align="center" width="400px" height="300px">
            <thead>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>成绩</th>
            </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>张三</td>
                    <td>计算机1班</td>
                    <td>87</td>
                </tr>
                <tr align="center">
                    <td>李四</td>
                    <td>计算机2班</td>
                    <td>89</td>
                </tr>
                <tr align="center">
                    <td>王五</td>
                    <td>计算机1班</td>
                    <td>98</td>
                </tr>
            </tbody>
        </table>

    </body>

九、CSS边框

    <style type="text/css">
            div{
                     边框的颜色
                     border-color:边框颜色的简写属性
                    1)边框颜色默认的顺序:上 右 下 左
                    2)边框颜色某一边如果没设置,那么取对边的颜色
                
                
                border-color:#f00;
                border-left-color:#f00 ;
                border-right-color:#00f ;
                border-top-color: #0f0;
                border-bottom-color: #FF0;
                
                 边框的宽度
                 border-width：
                
                

                border-left-width: 10px;

                border-right-width: 20px;

                border-top-width: 30px;

                border-bottom-width: 40px;

                边框宽度的简写属性
                 border-width: 10px;

                
               
                     一块标签,要想显示边框的效果,必须指定属性:边框的样式:
                     border-style:边框样式的简写属性
                     
                
                
                border-style: solid;
                border-left-style: solid;
                border-right-style: dashed;
                border-top-style: dotted;
                border-bottom-style: double;
                
                
                一个div显示边框,使用boder的简写属性
                
                border:1px solid #000 ;
                width: 50px;
                height: 50px;
                
            }

        </style>

十、盒子模型


            盒子模型:div块标签+css进行网页布局
              一个盒子属性:
             容量:就是给div块标签指定的宽度和高度

        <style type="text/css">
            div{
                设置边框
                border:1px solid #000;
                width: 100px;
                height: 100px;
                
                padding-left: 10px ;
            }
            
            #dv1{
                让div1盒子内边距向右移动10px
                padding-left: 10px;
                
                给div1设置一个下外边距
                margin-bottom: 10px;
            }
            
            #dv2{
                上外边距
                margin-top: 10px;

            }

            dispaly属性
                     常用的属性值:none 次元素不会被显示 隐藏了!
            .cba{
                display:none;
            }
            
            #spanId{
                display: block; 此元素将显示为块级元素，此元素前后会带有换行符
            }
            
            h3{
                display: inline;默认。此元素会被显示为内联元素，元素前后没有换行符。

            }

            浮动属性
                 float:
                         常用的两个属性值:
                                     left:左浮动

                                     right:右浮动

               

 

                 #ww{

                    float:left;

 

                    }

 

 

 

                    clear属性

                    设置一个元素的侧面是否允许其他的浮动元素。

                    both:在当前两侧都不允许有浮动元素

          

                    .cle{ 

                    clear:both;

                    }


     
  

 

           

Of_Mine
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS学习总结
weixin_54671516的博客
07-19 521
CSS语法；CSS引入方式；CSS选择器
CSS--简单概述
罗俊
07-27 2011
前言 内容 概述： 历史 语言特点 丰富的样式定义 易于使用和修改 多页面应用 层叠 页面压缩 总结 end 前言 CSS是Cascading Style Sheets的缩写，汉语意思为层叠样式表，根据其名称我们就可以知道CSS的功能是什么了吧，对！就是规范页面样式的一种脚本语言，现在就让我简单的为大家介绍一下CSS吧! 内容 概述： CSS是一种用来表现HTML...
css学习总结
XiaoduDadu的博客
07-08 553
css学习总结
CSS进阶课程
weixin_46249922的博客
07-21 184
css进阶部分课程（p66-86）
CSS课程小结
qq_52215423的博客
05-18 117
#CSS介绍 CSS是Cascading Style Sheets的缩写，意思是级联样式表。HTML是网页的结构，而CSS则为这些结构进行修饰。 #CSS语法 *结构： 一条CSS语句由选择器和{ }内包含的其他的声明构成。 说明： 1、选择器就是你想要修饰的对象 2、每条属性由一个属性和一个值组成，不同声明之间用**;** 分隔。 3、属性和属性值之间用**：**分隔开。 *选择器类别： 1、id选择器：用法上一般是唯一的，在选择器前加"#“进行选择。 2、class选择器：也叫类选择器，元素的
CSS的概述
qq_40208605的博客
04-04 2378
1.1CSS的概述1.1.1CSS是什么 CSS 通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。 CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。 1.1.2CSS名词解释 CSS (Cascad...
CSS inline-block属性概述及其使用示例
01-21
这个名字的由来是因为，可以简单的解释为inline+block ；display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。块级元素（block elements）来源于CSS盒子模型。块级元素...
easy:EASY CSS框架
03-18
概述EASY是基于以下4个核心原则开发CSS框架：灵活的无障碍React灵敏轻的灵活的有限CSS选择器专一性使开发人员可以轻松覆盖类。除了重置外，HTML标记基本上保持不变。这允许通过根据需要添加颜色，间距和其他CSS类来...
square.github.io:一个简单的静态门户，概述了我们的开源产品
04-29
Square开源门户 一个简单的静态门户，概述了我们的开源产品。 故意主题看起来像目录上的Square商人页面。发展在本地运行站点gem install bundler # first time onlybundle install # first time onlybundle exec ...
web前端课程设计以及报告，jquery+js+css+html
06-05
web前端课程设计，jquery+js+css+html，实现基本前台所有界面，
CSS课程代码
04-17
层叠样式表,学习代码,很详细.适合新手学习!
基于django+html+css+js的学院门户网站
最新发布
01-10
通过课程学习，学生将掌握Web系统的设计与开发方法，能够独立完成一个简单的Web应用的设计与开发，具备Web系统的维护和管理能力。本课程注重实践操作，通过大量的编程实践和项目实践，培养学生的实际操作能力和团队...
firefox-csshacks:影响浏览器的用户样式集合
04-27
作为概述，您将使Firefox加载两个特殊的样式表userChrome.css和userContent.css 。 为此，需要设置特定的首选项（请参见下文），然后在Firefox用户配置文件中创建这些文件。 设置非常简单，除了如何找到配置文件...
CSS课程
郭大侠
10-08 474
一、概述   1、如何定义样式：
css学习
bcx0827的博客
05-20 727
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 编程工具 记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。 Dreamweaver：它与Flash、Firewor
css课程学习总结
西科东詹
11-05 1560
2017年11月5日，再有几天就已经正式学习上课一个月了（上个月8号来的 ），这个月学习的东西总的来说分为两大类，html和css的基本学习，虽然囊中羞涩，但上次刚刚做完了html的总结，今日闲暇，再做一下css的总结吧 一：css的样式，及其作用， 前面的学习学的是html，简而言之的来讲，html就像是在盖房子，而css就像是给房子室内装修，美化，没错~,最主要的作用之一就是美化页
CSS课程学习心得
qq_41353794的博客
12-20 1712
CSS课程学习心得经过对HTML的学习，对网页有了初步的了解。 CSS课程也已经结束了，了解CSS用于体现如何优雅的展示页面内容，在给网站修饰时，注意要让CSS文件引进HTML文件里，而不是在HTML文件内部编写， CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。 基本格式如下： selector { property: value}
Html + CSS 基础课程
Katherineyxy的博客
04-24 911
一、Html 和 CSS的关系1. HTML 是网页内容的载体。2. CSS 样式是表现。3. JavaScript是用来实现网页上的特效效果。有动画的，有交互的，一般都用JavaScript来实现。二、Html 标签(标签的用途和标签在浏览器中的默认样式)1. HTML标签不区分大小写，但建议小写。2. 标签的语义化：明白每个标签的用途（在什么情况下使用此标签合理）好处：更容易被搜索引擎收录；更...
html onclick用法_HTML+CSS 基础知识-入门概述
05-26
以下是一个简单的例子： ``` ('Hello World!')">点击我 ``` 当用户单击按钮时，将弹出一个消息框，显示 "Hello World!"。 注意，使用 `onclick` 属性添加的 JavaScript 代码应该放在引号内，并且应该在双引号内...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值