CSS的简单概述

最新推荐文章于 2022-07-10 00:46:53 发布
最新推荐文章于 2022-07-10 00:46:53 发布
阅读量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
    评论
HTML & CSS 学习总结
weixin_62944936的博客
06-22 280
HTML（HyperText Markup Language）是超文本标记语言，我们用 HTML 来构建 Web 页面即所谓的网页。网页上的内容展示都编写在HTML文本中。请注意：HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。CSS（Cascading Style Sheets）是级联样式表，一种样式规则语言。CSS 将决定HTML上的内容该如何在屏幕上呈现。
CSS学习总结
weixin_54671516的博客
07-19 521
CSS语法；CSS引入方式；CSS选择器
CSS课程
郭大侠
10-08 474
一、概述   1、如何定义样式：
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课程学习总结
西科东詹
11-05 1560
2017年11月5日，再有几天就已经正式学习上课一个月了（上个月8号来的 ），这个月学习的东西总的来说分为两大类，html和css的基本学习，虽然囊中羞涩，但上次刚刚做完了html的总结，今日闲暇，再做一下css的总结吧 一：css的样式，及其作用， 前面的学习学的是html，简而言之的来讲，html就像是在盖房子，而css就像是给房子室内装修，美化，没错~,最主要的作用之一就是美化页
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 ...
基于django+html+css+js的学院门户网站
最新发布
01-10
通过课程学习，学生将掌握Web系统的设计与开发方法，能够独立完成一个简单的Web应用的设计与开发，具备Web系统的维护和管理能力。本课程注重实践操作，通过大量的编程实践和项目实践，培养学生的实际操作能力和团队...
firefox-csshacks:影响浏览器的用户样式集合
04-27
作为概述，您将使Firefox加载两个特殊的样式表userChrome.css和userContent.css 。 为此，需要设置特定的首选项（请参见下文），然后在Firefox用户配置文件中创建这些文件。 设置非常简单，除了如何找到配置文件...
web前端课程设计以及报告，jquery+js+css+html
06-05
web前端课程设计，jquery+js+css+html，实现基本前台所有界面，
【CSS】CSS概述
致力于成为顶尖的架构师
01-29 1374
在敲牛腩的时候对CSS有了一定的了解，但是只是了解了凤毛麟角，如果想真正学到精髓还需要深入的研究，首先从CSS的概念开始吧。 概念： CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步
CSS（一）——CSS概述
程序员的时光
03-05 369
1.CSS简介 CSS是指层叠样式表（Cascading Style Sheets）； 在前面我们讲过HTML，比方说html是骨架的话，那么css就是肉体了； 具体介绍请看百度百科； 2.CSS简单引用 比方说在一个html文件中，想要将多个段落的文件统一设置格式，那么就可以在head标签中添加相应的css样式； &lt;!DOCTYPE html&gt; &lt;html&...
CSS--简单概述
罗俊
07-27 2011
前言 内容 概述： 历史 语言特点 丰富的样式定义 易于使用和修改 多页面应用 层叠 页面压缩 总结 end 前言 CSS是Cascading Style Sheets的缩写，汉语意思为层叠样式表，根据其名称我们就可以知道CSS的功能是什么了吧，对！就是规范页面样式的一种脚本语言，现在就让我简单的为大家介绍一下CSS吧! 内容 概述： CSS是一种用来表现HTML...
css的的一些简单的介绍和特点
Arthur__Wong的博客
09-29 1200
Day3:  主要是认识为何要用css和怎么用css。    动态网页可以分为：jsp/asp/php/python 页面=数据（后台技术- jsp/asp/php/python）+html（显示）+css（样式）+js（动效）   Css 可以称为层叠样式表或级联样式表   Css主要特点： 1.可很好的控制页面的布局（div+css可以非常灵活地制作前段页面） 2.提高网
css学习总结
weixin_59049031的博客
07-10 326
什么是css： css称为层叠样式单。 它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。 在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。CSS与传统HTML描述数据方式比较有那些优势 表达效果丰富 文档体积比较小 便于信息检索 可读性好 注意：CSS是将文档格式和样式分离，便于管理和修改，使网页更加完善。1、什么是css css：层叠样式表，Cascading Style Sheet 的简写。css是一组样式设置的规则，用于
css概述
w_t_y_y的博客
10-17 487
一、css语法： 选择器{属性：值；属性：值；} 选择器有三种： 1、id选择器，一般留给js使用； 2、元素选择器（即标签名），一般用于初始化页面给所有的同名元素一个初始化的样式； 3、类选择器，一般将共同样式定义在同一个class里面复用。 id只能唯一标识，而元素和类都可以多重标识，一个元素还可以加多个class，如： 选择器样式优先级：行内样式>ID选择器 > 类选择器
HTML与CSS学习基础总结
weixin_41719737的博客
08-22 7158
先了解学习的知识点有哪些： HTML HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。 CSS CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。 可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。...
html onclick用法_HTML+CSS 基础知识-入门概述
05-26
`onclick` 是一个 HTML 属性，用于在用户点击指定的 HTML 元素时触发 JavaScript 代码。它可以应用于任何 HTML 元素，例如按钮、链接、图像等。 使用 `onclick` 属性，可以为 HTML 元素添加交互性。例如，当用户单击按钮时，可以显示一个消息框或执行一些其他的 JavaScript 操作。 以下是一个简单的例子： ``` <button onclick="alert('Hello World!')">点击我</button> ``` 当用户单击按钮时，将弹出一个消息框，显示 "Hello World!"。 注意，使用 `onclick` 属性添加的 JavaScript 代码应该放在引号内，并且应该在双引号内使用单引号，或者在单引号内使用双引号。例如： ``` <button onclick="myFunction()">点击我</button> ``` 在上面的例子中，`myFunction()` 是一个 JavaScript 函数，它将在用户单击按钮时被调用。 除了 `onclick` 属性，还有其他一些类似的 HTML 属性，如 `onmouseover`、`onmouseout`、`onload` 等，它们可以用于在特定事件发生时触发 JavaScript 代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值