【学习笔记】CSS

   日期:2024-12-30    作者:ira0v 浏览:56    移动:http://w.yusign.com/mobile/quote/8549.html

        

        层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

        CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

         选择器:要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

                      HTML页面中的元素就是通过CSS选择器进行控制的。

         属性:要改变的样式名,例如:color,font-size,margin,font-fimaly。

                   一个选择器中每个声明之间用分号分隔开来。

         注释:CSS中这样来注释:

                     

        1、内嵌式引入:

             在html头部head部分内,使用style标签插入css样式,在head标签中使用style标签定义自己需要的样式:

      <head>

           <meta charest="UFT-8">

           <title>Title</title>

           <style type="text/css">

                  body{font-size:36px;}

                  div{color:red;border:1px solid blue;background:yellow;} 

           </style>

      </head>

        2、行内样式:

              直接在HTML标签中,使用style属性内嵌css样式:

              <b style="font-size:56px;">行内样式直接在标签中用style属性内嵌css样式</b>

        3、外链样式:

              把css样式写成一个单独的CSS文件,再在head标签中通过link标签即可复用:

              <link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/qingwendeblog/p/css文件地址">

       4、嵌入样式:

             使用@import引用外部CSS文件(不太常用):

             <style type="text/css">

                @import url("css/style.css");

            </style>

       注意会显示哪种样式 取决于哪种样式离修饰的目标越近,

                  行内样式>剩下的其它三种形式,样式的显示取决于距离。

        浏览器根据“选择器”来决定受CSS样式影响的html标签(元素)

       1、标签选择器:

         通过标签名选择器决定哪些标签被动的使用这个样式:

         例如:body{color:red;} p{color:red},对html中的所有该标签都起作用。

       2、id选择器:

          让我们通过id属性选择性使用这个样式,id选择器的标识是 # 。(一个井号)

              #one{

                     color:gold;

              }

        3、class选择器(类选择器):

              通过class属性有效的选择使用这个样式,当标签中出现class属性的时候,

              那么可以使用类选择器类选择器,通常应用于几个标签具有相同的样式。 class选择器的标识是 . 。(一个点)    

              .pink{

                     color:pink;

              }

         4、全选择器:

               使用*号来表示 对整个html中的所有标签都起作用。

              *{

                    font-size:36px;

                    color:black;

                }

                  适用场景: 每种浏览器的默认属性的相关值都不一样,一般情况在网页开发的初始阶段,

                                    需要把所有浏览器的默认值 都归到一个统一的默认值下。然后再进行具体其他操作。

           5、组合选择器:

                 可以让多个选择器共用一个CSS代码,每个选择器名称间用逗号隔开。

                 选择器1,选择器2·····选择器n{

                                                属性:值;

                                                  } 

           6、包含选择器(后代选择器):

                   我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

                   前一个选择器和后一个选择器是包含关系,中间用空格隔开。

                   #content p{

                             color:red;

                      }

           1、字体颜色:

                 color:red;

                 颜色可以写颜色名如:black,green,orange,yellow等。颜色也可以写 rgb值和十六进制表示值,写十六进制必须加#:如rgb(0,0,0),#ffffff。

            2、宽度:

                  width:20px;

                  宽度可以写像素值:20px;。也可以写百分比值:50%;。

             3、高度:

                  height:20px;

                  高度可以写像素值:20px;。也可以写百分比值:50%;。

            4、背景颜色:

                  background-color:orange;

            5、字体样式:

                  color:blue;  字体颜色蓝色。

                  font-size:30px;  字体大小。

                  font-wight:bold;  字体加粗。

            6、边框:

                  border:1px solid black;  黑色1像素实线边框。

            7、div居中:

                  margin:0 auto;使div居中。

            8、文本居中:

                  text-align:center; 使文本居中。

            9、超链接去掉下划线:

                  text-decoration:none;去掉链接的下划线。

            10、在CSS中控制div中放图片:

                  background: url(图片的地址);  在css中将图片引入div中。

本文地址:http://w.yusign.com/quote/8549.html    述古往 http://w.yusign.com/static/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关行情
推荐行情
点击排行
{
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号