欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html之CSS样式学习笔记

程序员文章站 2022-03-04 11:43:02
本文内容： 什么是CSS CSS写在哪 样式（CSS怎么写） 盒子模型 尺寸样式 字体 文本 边框 背景 图片 display样式 边距 浮动布局 定位布局 首发日期：2018-04-04 什么是css: css全名是层叠样式表(Cascading Style Sheets) CSS的作用：给htm... ......

本文内容：

  • 什么是CSS
  • CSS写在哪
  • 样式（CSS怎么写）
    • 盒子模型
    • 尺寸样式
    • 字体
    • 文本
    • 边框
    • 背景
    • 图片
    • display样式
    • 边距
    • 浮动布局
    • 定位布局

 

 

 

首发日期：2018-04-04

什么是css:

  • css全名是层叠样式表(Cascading Style Sheets)
  • CSS的作用：给html标签添加“样式”，样式定义了如何显示 HTML 元素

 

CSS写在哪：

  • CSS与html息息相关，
    • 1.可以写在html的标签的style中。
    • 2.可以写在head标签的<script></script>中。
    • 3.可以单独写在一个文件中（一般文件类型为css，称为样式表），然后通过<link>来导入。

 

css的创建：

  • 写在style中时：html之CSS样式学习笔记
  • 写在<head>的<style>:html之CSS样式学习笔记
  • 写在样式表中：html之CSS样式学习笔记，导入html之CSS样式学习笔记

 

 

CSS的覆盖与优先级：

  • 层叠就是对一个标签多次设置同一个样式，这使最终的样式将使用最后一次设置的属性值。【相同的值覆盖，不同的值保留】
  • 当有多个css的时候：
    • html是从上到下执行的，所以CSS的优先级和标签的最终效果可以根据css的位置来判断
      • 一般来说，标签内部style属性里面的是最高的
      • 另外的，<link>获取的和<style>的位置谁在下面，谁优先级就高（然而规则上始终应该让link在style之前，因为style是自己写的，即使已经导入样式，还是可能有些样式我们需要重写）

 

这里不讨论CSS选择器，如果想要了解，可以参考我的另外一篇博文，我已经划分明了了，

http://www.cnblogs.com/progor/p/8495520.html

 

 

考虑排版问题，所以下面的演示都是在style中写css,对比其他两种方式，主要是css选择器的区别而已。

 

盒子模型：

 

盒子模型可以把每一个标签都看作一个盒子，并且占据一定的页面空间，而这个盒子是由内容、外边距、内边距、边框四个属性组成，并且内容的大小受width宽度、height高度影响。

 

 

html之CSS样式学习笔记

 

尺寸样式：

尺寸样式只对块级标签生效，样式包括宽度和高度。

 

  • height:高度
  • min-height:最小高度
  • max-height:最大高度
  • width:宽度
  • min-width:最小宽度
  • max-height:最大宽度

 

  • 设置最大高度、宽度之后，那么标签会随内容增多而变大，但最大就那么大，如果再大，则会超出。html之CSS样式学习笔记
  • 最小高度、宽度就是即使没有内容，标签也会有最小的显示的高度、宽度，（当然无法改变块级标签的最小宽度咯）html之CSS样式学习笔记
  • 默认情况下，如果内容过大，那么三种设置的大小都会随内容而增大，他们的主要区别在于：如果一起使用，那么max-height这些能限制height的设置，如果设置超过最大值就会失效。min-height就是设置最小值。

 

字体：

字体样式是指标签的内容的字体的样式。（诸如表格中的字体、段落中的字体。。。）

常见的字体样式有：字体粗细、斜体、字体系列、字体大小、字体颜色

 

 

  • 字体粗细：font-weight：值可以为关键字值或100-900的数值html之CSS样式学习笔记
    • 关键字：bold较粗的（相当于700），lighter较细的，（正常的相当于400） 
      <div style="font-weight: 200;">200的粗细</div>
<div style="font-weight: bold;">bold的粗细</div>
  • 是否斜体：font-style：值为"italic" 代表使用斜体html之CSS样式学习笔记；obilique也是倾斜，但主要用于没有斜体属性的字体 
      <div style="font-family: '微软雅黑';font-style: italic;">微软雅黑</div>
  • 字体系列：font-family:值为各种字体，比如宋体，微软雅黑；“为多个值时代表从左到右判断到一个存在的字体就设置，如果不存在对应字体就继续向右” 
              <div style="font-family: '宋体';font-size: small;">宋体</div>
        <div style="font-family: '微软雅黑';">微软雅黑</div>
        <div style="font-family: '微软雅黑C','宋体';">没有微软雅黑C,所以显示宋体</div>
  • 字体大小：font-size：值可为一些代表大小的关键字或px值html之CSS样式学习笔记
    • 关键字：small（小字体），large(大号字体) 
      <div style="font-family: '微软雅黑';font-size: small;">小号字体</div>
<div style="font-family: '微软雅黑';font-size: 20px;">20px字体</div>
  • 字体颜色：color：值为各种颜色（英文颜色字符串，RGB值，十六进制RGB颜色值）html之CSS样式学习笔记
    • rgb值比如:rgb(250,250,250),颜色字符串比如blue,十六进制RGB颜色值比如#FFFFFF 
      <div style="color: purple;">紫色字体</div>
<div style="color: rgb(128,0,128);">紫色字体</div>
<div style="color: #800080;">紫色字体</div>

 

文本：

文本的样式主要涉及多个文字之间的排版问题（以text打头的样式）

文本的常见样式有划线、大小写、行高、字距、词距、文本水平对齐方式、段落首行缩进、文本方向、文本内容溢出显示

 

 

  • 划线：text-decoration:html之CSS样式学习笔记
    • underline：下划线
    • line-through:删除线
    • 其他。。。 
      <div style="text-decoration: underline;">下划线文本</div>
<div style="text-decoration: line-through;">删除线文本</div>

 

  • 行高：line-height:值为px值html之CSS样式学习笔记 
      <div style="line-height: 20px;background-color: red;">20px文字</div>
<div style="line-height: 40px;background-color: blue;">40px文字</div>

 

  • 文本水平对齐方式：text-align:值可为left，center,righthtml之CSS样式学习笔记 
      <div style="text-align: right;">一段文字</div>
<div style="text-align: center;">一段文字</div>
<div style="text-align: left;">一段文字</div>

 

  • 首行缩进：text-indent:值为px值html之CSS样式学习笔记 ，也可以为%值，%为父标签的%宽度 
      <p style="text-indent: 40px;">大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字
大段文字大段文字大段文字大段文字大段文字大段文字
大段文字大段文字大段文字大段文字大段文字大段文字大段文字
大段文字大段文字大段文字大段文字大段文字大段文字大段文字</p>

 

  • direction:文本方向，在一些版本不生效
    • ltr：从左到右
    • rtl:从右到左【所谓的从右到左，就是最后的文本始终在最右边】

 

  • 当文本内容超出标签大小时怎么显示：overflow
    • auto:使用滚动条显示超出的内容html之CSS样式学习笔记
    • hidden:隐藏，不显示内容，忽略超出的内容html之CSS样式学习笔记
    • 默认是超出大小来显示内容，标签大小被内容撑大了

 

 

补充：

  • text-shadow：给文本添加阴影效果,需要四个值(水平阴影的位置,垂直阴影的位置,[模糊的距离],[阴影的颜色])

边框：

边框样式是对于能设置边框的标签的边框的样式。（div,img,table，span等）

边框样式主要有宽度，外观，颜色，边框

 

 

  • 宽度：border-width:值为px值,或几个关键字(thin细,thick粗) 
      <span style="border-style: solid;">实体线</span>
<span style="border-style: solid;border-width: 5px;">实体线</span>
      • 外观：border-style:值为几个关键字html之CSS样式学习笔记
        • 关键字:solid实线，dashed虚线，dotted点线，double双线，ridge脊线，groove槽线
        • 【可以有四个值，依次为“上右下左”的边框外观】  
          <span style="border-style: dashed;">虚线</span>
<span style="border-style: solid;">实体线</span>
<span style="border-style: dotted;">点线</span>
<span style="border-style: double;">双线</span>
<span style="border-style: ridge;">脊线</span>
<span style="border-style: groove;">槽线</span>

       

      • 颜色：border-color:值为各种颜色（英文颜色字符串，RGB值，十六进制RGB颜色值）
        • 但注意，单纯设置边框颜色是无效的，因为默认没有边框 
          <span style="border-color: red;border-style: dotted;">红线框</span>
<span style="border-color: red";>无边框</span>

       

      • 也可以设置一边的边框的样式：border-XXXX-样式,XXXX为bottom底部\left左边\right右边\top顶部，样式为style,width,color 
          <span style="border-left-style: dotted;border-left-color: #008000;">单左边框</span>
<span style="border-left-style: dotted;border-left-width: thick;">单左边框</span>

       

      • border:可以统一设置上面的三个属性
        • 同样的，也有border-XXXX来统一设置单边边框的三个属性,XXXX为bottom底部\left左边\right右边\top顶部 
          <span style="border: dotted thin green;">border属性</span> 
  <span style="border: dotted green;">border属性</span> 
  <span style="border-right: dotted thin green;">border属性</span>

       

      补充：

      • border-radius:向 div 元素添加圆角边框（圆框头像的实现）

       

       

      背景：

       

      背景样式主要包括背景图像，背景颜色，背景图像是否重复、背景起始位置，背景透明度、

       

       

      • 背景颜色background-color：设置标签的背景颜色 
          <p style="background-color:blue">雷猴啊</p>

       

       

                    • 背景图片background-image:将图片设置为背景,url()为图片路径 ，也可以为网页路径html之CSS样式学习笔记 
                        <div style="background-image: url(123.gif);height: 65px;">背景图片</div>
<div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 30px;">背景图片</div>

                     

                     

                    • 背景图像是否重复background-repeat：设置背景图像是否重复及如何重复，值可为no-repeat不重复，repeat-x水平重复，repeat-y垂直重复
                      • 水平重复html之CSS样式学习笔记，不重复 html之CSS样式学习笔记 
                        <div style="background-image: url(123.gif);height: 65px;background-repeat: no-repeat;">背景图片</div>
<div style="background-image: url(123.gif);height: 65px;background-repeat: repeat-x;">背景图片</div>

                     

                     

                     

                    • 背景起始位置background-position(比如center就是显示图片的中间图片，然后根据标签的大小来显示图片)： 值可以为px值，百分值，或一些关键字(top,center,bottom,left,right)
                      • 可以有两个值，顺序是x,y，也可以使用background-position-x\background-position-y来单独设置水平\垂直方向的。 
                        <div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 20px;width:20px;background-position:center;"></div>
<div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 20px;width:20px;background-position:20px 20px;"></div>
<div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 20px;width:20px;background-position-y: 20px;"></div>
                    • 背景透明度：opacity，值为0-1,0为完全透明html之CSS样式学习笔记 
                        <div style="background-color: bisque;">透明度测试,无透明度</div>
<div style="background-color: bisque;opacity: 0.2;">透明度测试，0.2</div>
<div style="background-color: bisque;opacity: 0.5;">透明度测试，0.5</div>

                     

                     

                     

                    补充：

                    • background-position可以用来节省资源，只需要下载一张图片，然后依靠background-position截取下自己想要的部分即可。比如从百度的图片中截取出一个Bhtml之CSS样式学习笔记

                     

                    图片：

                    图片的样式有图片大小、图片边框、图片对齐方式、图片过大的显示方式

                     

                     

                    • 图片大小：
                      • width:值可以为px值，也可以为百分值
                      • height:值可以为px值，也可以为百分值
                    • 图片边框：参考上面的"边框"
                    • 图片水平对齐：text-align也对图片对齐有效，可以参考上面的"文本"
                    • 图片垂直对齐：vertical-align,值可以为关键字(top顶部对齐、middle中间对齐、bottom底端对齐，baseline对齐等待)或百分值
                      • middle:把此标签放置在父标签的中部。
                      • top:把标签的顶端与行中最高标签的顶端对齐
                      • 。。。html之CSS样式学习笔记
                    • 如果图片过大，超过width,height如何显示：overflow:
                      • auto:使用滚动条显示
                      • hidden:超出大小的图片内容忽略，只显示可显示的大小

                     

                    display样式：

                    display样式可以改变标签的“块级或行内”，也可以使隐藏标签

                     

                    display:

                    • inline:将块级变成行内标签 html之CSS样式学习笔记
                    • block：将行内标签变成块级标签 html之CSS样式学习笔记
                    • inline-block:兼容行内-块级的属性【比如div变成行内后，想给div标签设置高度，就需要设置这个】 html之CSS样式学习笔记
                    • none:隐藏标签【一些标签是需要进行某些操作之后才显示的，比如模态对话框，那么可以在之前先设置为display:none】

                     

                     

                    边距：

                    边距样式有内边距和外边距

                    • 外边距就是元标签与标签的距离。
                    • 内边距就是标签内容与边框的距离。

                    html之CSS样式学习笔记html之CSS样式学习笔记

                     

                     

                    • 内边距
                      • padding-bottom:下内边距 ，值为px值或百分值
                      • padding-top:上内边距 ，值为px值或百分值
                      • padding-left:左内边距 ，值为px值或百分值
                      • padding-right:右内边距 ，值为px值或百分值
                      • padding:边距，可统一设置四个方向的边距，值为px值或百分值
                        • 只有一个值时，是统一设置四个方向的内边距，比如padding: 5px相当于设置其他四个方向的边距都为5px
                        • 两个参数时，第一个参数是上下内边距，第二个参数是左右内边距
                        • 有四个值时，为依次设置“上右下左”（顺时针）的内边距
                    <span style="background-color: cornflowerblue;padding: 15px;">内容1</span>
<span style="background-color: cornflowerblue;padding: 15px;border: dashed;">内容1</span>
<span style="background-color: cornflowerblue;padding-left: 15px;border: dashed;">内容1</span>

                     

                     

                    • 外边距
                      • margin-bottom：下外边距 ，值为px值或百分值
                      • margin-left:左外边距 ，值为px值或百分值
                      • margin-right:右外边距 ，值为px值或百分值
                      • margin-top:上外边距 ，值为px值或百分值
                      • margin:统一设置四个方向的外边距
                        • 只有一个值时，是统一设置四个方向的外边距，比如margin: 5px相当于设置其他四个方向的外边距都为5px
                        • 两个参数时，第一个参数是上下外边距，第二个参数是左右外边距
                        • 四个参数时，分别为“上、右、下、左”（顺时针）
                    <span style="background-color: cornflowerblue;padding: 15px;margin:10px;border: dashed;">内容1</span>
<span style="background-color: cornflowerblue;padding: 15px;margin-left:20px;border: dashed;">内容1</span>
<span style="background-color: cornflowerblue;padding: 15px;margin:10px;border: dashed;">内容1</span>        
<span style="background-color: cornflowerblue;padding: 15px;margin:5px 6px 7px 8px;border: dashed;">内容1</span>

                     

                     

                    补充：

                    • 使用auto值时会默认居中父元素，比如左右auto的话就会变成水平居中
                    • 使用auto参数问题:如果本身内容的大小不确定的话是无法auto的，（比如两个标签是float的时候，那么此时内容的宽度是无法确定的）
                      • 例子：html之CSS样式学习笔记
                      • html之CSS样式学习笔记

                     

                    浮动布局：

                     

                    谈浮动布局之前要谈一下html标准文档流，标准文档流的标签布局从上到下，从左到右，依次排列，块级标签独占一行。

                    而浮动布局是“脱离”标准文档流的，根据给定的属性left\right来向父标签贴靠（据说float设计初衷是做成图片环绕）,

                     

                    • float：可以使标签“漂浮”起来
                      • left:漂浮起来靠左
                      • right:漂浮起来靠右

                     

                    由于初衷是图片环绕，所以float的标签的内容会影响其他标签的文本显示，而不是“漂浮起来后会掩盖下面的内容”，但可以掩盖非内容部分（即使div是块级的，没有内容的时候依旧可以漂浮在上面）（重点），下面是例子

                    html之CSS样式学习笔记html之CSS样式学习笔记html之CSS样式学习笔记

                     

                    效果演示：

                    html之CSS样式学习笔记

                    将222漂浮向右后：

                    html之CSS样式学习笔记

                    html之CSS样式学习笔记

                     

                     

                    示例代码：

                    <div style="background-color: coral;border:dashed black">
            
    <div style="background-color: blue;">111</div>
    <div style="background-color: chartreuse;float: right;top: 0px;">3333</div>
    <div style="background-color: blueviolet;">222</div>
    <div style="background-color: chartreuse;float: left;top: 0px;">33333</div>
    <div style="background-color: blueviolet;">222</div>
    <div style="background-color: blueviolet;">222</div>
            
</div>

                    html之CSS样式学习笔记

                     

                    补充：

                    • 任何标签漂浮起来后，都会变成“块级“的，不会占整行。
                    • float会造成父标签塌陷,我们知道的是一个标签如果内容，是不会显示出来的，而当子标签都float的时候（假设父标签没有子标签以外的内容），可以说子标签已经脱离父标签了，所以这时候父标签相当于是没有内容的。html之CSS样式学习笔记
                      • 解决方法一：在父标签中增加一个div标签，并且style属性为"clear:both"即可 
                          <div style="background-color: coral;border:dashed black">
    <div style="background-color: chartreuse;float: right;top: 0px;">3333</div>
    <div style="background-color: chartreuse;float: left;top: 0px;">33333</div>    
    <div style="clear: both;"></div>
</div>
                      • 方法二：BFC法，这里不解释，想知道的可以百度。。。。
                    • 清除浮动：clear 属性规定元素的哪一侧不允许其他浮动元素。
                      • 加clear:both之前html之CSS样式学习笔记，加之后html之CSS样式学习笔记，看得出来clear的功能吧。 
                        <div style="background-color: coral;border:dashed black">
    <div style="background-color: chartreuse;float: right;top: 0px;">3333</div>
    <div style="background-color: chartreuse;float: left;top: 0px;">33333</div>    
    <!--<div style="clear: both"></div>-->
    <div style="clear: both;">222</div>
    <!--<div >222</div>-->
</div>

                     

                    定位布局：

                     

                    • 定位布局能够使你将一个标签精确的放置在页面上你指定的位置。
                    • 定位布局一般有三种方式：fixed固定定位，relative相对定位，absolute相对定位，static静态定位（好像少用，不讲）

                     

                    • 定位布局的三种方式都是属性position的值
                      • fixed: 一直处在第一次定义的位置（相对浏览器而言，不会因为页面滚动而改变） 
                          <div style="background-color:lightcoral;position: fixed;bottom: 0;right: 0;left: 0;">这是一个不论如何滚动，永远在浏览器底端的菜单栏</div>
                      • absolute: 一直处于第一次生成的页面的绝对位置，第一次定义在哪里就永远在哪里，（相对网页而言） 
                          <div style="background-color:lightcoral;position: absolute;bottom: 0;right: 0;left: 0;">这是一个随页面滚动的菜单栏</div>
                      • releative: 如果单纯有position没有top等属性，那么没有实际变化，与不添加position没有区别；一般依靠top等属性定位 ，它的四个属性的基准是原有的边框
                        • html之CSS样式学习笔记html之CSS样式学习笔记 
                          <div style="background-color:lightcoral;position: relative;top: 10px;right: 0;left: 20px;">这是一个基于原来位置改变位置的标签</div>
<div style="background-color: bisque;">这是一段要被覆盖的内容</div>
                      • releative+absolute:可以使标签位于使用releative的标签的绝对位置中（一般的absolute是相当整个网页的绝对，relative使absolute可以相对于某个标签）
                        • html之CSS样式学习笔记 
                          <div style="background-color: coral; width: 200px;height:200px;position: relative;">
            
    <div style="position: absolute;bottom: 0;right: 0;border: dashed;">靠父标签的右下角</div>
    <div style="position: absolute;top: 0;left: 0;border: dashed;">靠父标签的左上角</div>
            
</div>
                    • 使用定位布局还可以有下面几个属性：
                      • top:定义标签跟父标签的顶部距离（relative的为基于原标签位置的距离），值为百分值或px值
                      • right:定义标签跟父标签的右边距离（relative的为基于原标签位置的距离），值为百分值或px值
                      • bottom:定义标签跟父标签的底端距离（relative的为基于原标签位置的距离），值为百分值或px值
                      • left:定义标签跟父标签的左边距离（relative的为基于原标签位置的距离），值为百分值或px值
                      • z-index:定义当发生标签重叠时，标签的堆叠顺序，值大的会显示在最上面
                        • html之CSS样式学习笔记 
                          <div style="background-color: blueviolet;text-align: center;position: fixed;top:0;bottom:0;right:0;left:0;z-index: 10;">
            底层内容
</div>
<div style="background-color: palegreen;opacity:0.5;position: fixed;top:200px;bottom:200px;right:200px;left:200px;z-index: 11;">
            顶层内容
</div>

                     

                     

                     

                     

                     

                     

                    上一篇： css样式变 及实际用法

                    下一篇： CSS画各种二维图形

                    推荐阅读