CSS基础知识

最新推荐文章于 2023-07-05 14:20:09 发布

Toreme

最新推荐文章于 2023-07-05 14:20:09 发布

阅读量172

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_55727899/article/details/122591169

版权

基础

教程

使用css和不使用比较

不使用css
- 不使用css 给每一个单元格加上背景颜色
  就需要给每一个td元素加上bgcolor属性
使用css
- 使用css 给每一个单元格加上背景颜色，只需要在最前面写一段css代码，所有的单元格都有背景颜色了，这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到

不同的td有不同的背景色

选择器
语法
- css的语法
  - selector {property: value;} 即选择器{属性:值}
  - 学习css即学习有哪些选择器，哪些属性以及可以使用什么样的值
- 选择所有的p元素
  
  选择所有的p元素，并且设置文字颜色为红色
- 也可以直接在元素上增加style属性
  
  直接在某一个元素上增加style属性即可达到css一样的效果
  
  这是style为红色的
  
  这是一个没有style的p
选择器

选择器主要分3种：元素选择器、id选择器、类选择器
- 元素选择器
  
  元素选择器通过标签名选择元素。在实例中，所有的p都被设置成红色
注释

注释style样式(在style模块中可行)

注释以/* 开始,以*/结束,被注释掉的文字会自动隐藏

尺寸

设置元素的尺寸
- 尺寸大小
  
  属性：width
  值：可以是百分比或者像素
  为了便于观察一个元素的大小设置效果，进行了背景色的设置
```
p#percentage{
 ``width:50%;
 ``height:50%;
 ``background-color:pink;
}
```
背景
- 背景颜色
  
  属性名background-color
  颜色的值可以采用3种方式
  1. 预定义的颜色名字
    比如red,gray,white,black,pink，参考颜色速查手册
  2. rgb格式
    分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
  3. 16进制的表示
    #00ff00 等同于 RGB(0,255,0)
- 图片做背景
  - **
    
    这是一个有背景图的DIV
    **
- 本地测试
  
  在本地测试的时候，请先从右侧下载图片
  不要写成 background-image:url(/study/background.jpg);
  而是写成 background-image:url(background.jpg);
  并且把图片和html文件放在同一个目录下
- 背景重复
  
  background-repeat属性
  值可以选
  repeat; 水平垂直方向都重复
  repeat-x; 只有水平方向重复
  repeat-y; 只有垂直方向重复
  no-repeat; 无重复
- 背景平铺
  
  属性：background-size
  值：contain
文本
- 文字颜色
  
  属性名color
  颜色的值可以采用3种方式
  1. 预定义的颜色名字
    比如red,gray,white,black,pink
  2. rgb格式
    分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
  3. 16进制的表示
    #00ff00 等同于 rgb(0,255,0)
- 对齐
  
  属性:text-align
  值：left,right,center
  div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。
  
  但是，span却看不出右对齐效果，为什么呢？
  因为span是内联元素其默认宽度就是其文本内容的宽度
  简单说就是文本已经粑在其边框上了，对齐是看不出效果来的
  
  使用了后面的样式风格，让div和span的边框显露出来，便于理解本知识点
  用到了边框和外边距
- 文本修饰
  - 属性：text-decoration
    值： overline
    
    abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
    **
    abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
    **
  - 单词间距
    
    属性：word-spacing
    值：数字
  - 首行缩进
    
    属性：text-indent
    值：数字
  - 大小写
    - 属性：text-transform
      值：
      uppercase 全部大写
      capitalize 首字母大写
      lowercase 全部小写
  - 空白格
    - 属性：white-space
      值：
      normal 默认。多个空白格或者换行符会被合并成一个空白格
      pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
      pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
      nowrap 一直不换行，直到使用br
字体
- 尺寸
  
  属性：font-size
  值：数字或者百分比
  
  0.5em 等同于 50%比例的文字
- 风格
  
  font-style:
  normal 标准字体
  italic 斜体
- 粗细
  
  属性： font-weight
  normal 标准粗细
  bold 粗一点
- 字库
  
  属性font-family
- 声明在一起
  
  把大小，风格，粗细，字库都写在一行里面
  
  默认字体
  
  斜体的粗体的大小是30px的 “Times New Roman”
鼠标样式
- 鼠标样式
  - <span>鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span>
- 样式一览
  1. cursor:default
  2. cursor:auto
  3. cursor:crosshair
  4. cursor:pointer
  5. cursor:e-resize
  6. cursor:ne-resize
  7. cursor:nw-resize
  8. cursor:n-resize
  9. cursor:se-resize
  10. cursor:sw-resize
  11. cursor:w-resize
  12. cursor:text
  13. cursor:wait
  14. cursor:help
  15. cursor:not-allowed
表格

表格相关样式
- 表格布局
  
  属性:table-layout
  automatic; 单元格的大小由td的内容宽度决定（分配空间）
  fixed; 单元格的大小由td上设置的宽度决定
  注：只对连续的英文字母起作用，如果使用中文就看不到效果
- 表格边框
  
  属性：border-collapse
  值：
  separate:边框分隔
  collapse:边框合并
边框

元素的边框
- 边框风格
  
  属性： border-style
  
  默认无边框
  
  solid: 实线
  dotted:点状
  dashed:虚线
  double:双线
- 边框颜色
  
  属性：border-color
  值：red,#ff0000,rgb(255,0,0)
- 边框宽度
  
  属性：border-width
  值：数字
- 都放在一起
  
  属性：border
  值：颜色风格宽度
- 只有一个方向有边框
  
  通过制定位置，可以只给一个方向设置边框风格，颜色和宽度
  
  top,bottom,left,right 分别对应上下左右
  
  border-top-style:solid;
  
  border-top-color:red;
  
  border-top-width: 50px;
- 有交界的边都有边框
  
  比如上和左就是有交界的，而上和下就没有交界。当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。
- 块级元素和内联元素的边框区别
  
  可以看到，块级元素div默认是占用100%的宽度
  常见的块级元素有div h1 p 等
  而内联元素span的宽度由其内容的宽度决定
  常见的内联元素有 a b strong i input 等
内边距 padding

元素内边距
指的是元素里的内容与边框之间的距离
属性：
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上右下左
- 左内边距
  - 属性:padding-left
    值：数字
    指的是，元素中的内容，与边框之间的距离
- 内边距，写1个和写4个的区别
  - 属性：padding
    值：如果只写一个，即四个方向的值
    值：如果写四个，即四个方向的值
    上右下左,依顺时针的方向依次赋值
- 当内边距的值少于4个的时候
  - 如果缺少左内边距的值，则使用右内边距的值。
    如果缺少下内边距的值，则使用上内边距的值。
    如果缺少右内边距的值，则使用上内边距的值。
    举例说明
    这是完整4个的
    padding: 10 20 40 80
    如果只有3个
    padding: 10 20 40
    那么left取right
    padding: 10 20 40 = padding: 10 20 40 20
    如果只有两个
    padding: 10 20
    那么bottom取top，left取right
    padding: 10 20 = padding:10 20 10 20
    如果只有一个
    padding:10
    那么right取top，bottom取top，left取top
    padding:10 = padding:10 10 10 10
外边距 margin

元素外边距
指的是元素边框和元素边框之间的距离
属性：
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距
- 左外边距
  - 属性: margin-left
    值：数字
    指的是元素边框和元素边框之间的距离
    
    注：像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。为了观察上下外边距的效果，可以采用块级元素，比如div.
边框模型

结合边框内边距外边距的学习理解边框模型
- 边框模型
  - 真正决定一个元素的表现形式，是由其边框模型决定的
    由图所示
    蓝色框即为内容
    width:70px 表示内容的大小
    红色框即为边框
    内容到边框之间的距离，即为内边距 5px
    灰色框，是指边框与其他元素之间的距离，即为外边距：10px
  - .box{
    
    width:70px;
    
    padding:5px;
    
    margin: 10px;
    
    }
超链状态

超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候
- 超链状态
  - 伪类，所谓的伪类即被选中的元素处于某种状态的时候
- 去除下划线的超链
  - 默认状态下，超链是有下划线的，但是现在网站上的超链普遍采用无下划线风格。
    
    使用 text-decoration: none 文本修饰的样式来解决
隐藏

隐藏元素有两种方式
display:none;
visibility:hidden;
- 隐藏
  - 使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
    使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”
CSS文件

如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护

这个时候就会选择把所有的css内容，放在一个独立文件里

然后在html中引用该文件

通常这个文件会被命名为style.css
- 直接在html里面写样式
- 把样式代码写在style.css，并在html中包含它
  - 创建一个文件叫style.css
    其内容为
    
    .p1{
    
    color:red;
    
    }
    
    .span1{
    
    color:blue;
    
    }
    
    然后在html中包含该文件
    
    <link rel="stylesheet" type="text/css" href="/study/style.css" />
    
    **注：**style.css文件里，就不要再使用style标签了
- css是本地文件如何包含
  - 在测试的时候，大家写的css文件都是放在本地的，比如d:/style.css
    这时就应该写成
    href=“file://d:/style.css”
优先级

如果style.css中，
- style标签与外部文件style.css样式重复
  - 外部文件style.css的内容是
    
    .p1{
    
    color:red;
    
    }
    
    .span1{
    
    color:blue;
    
    }
    
    同时style标签中也有一个.p1
    那么优先使用： 最后出现的一个
  - <link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />
    
    p1 颜色是绿色，优先使用!important样式
布局

绝对定位

==注意==0px和px有区别（0px在元素最左，px会默认对其元素内文字，或者说与

的文字不一样
）
通过指定left,top绝对定位一个元素
- 绝对定位
  - 属性：position
    值： absolute
    设置了绝对定位的元素，相当于该元素被从原文档中删除了
    所以”正常文字4“会紧接着出现在 ”正常文字2“后面，而不会留下空档
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QRLaCVcd-1642601864454)(C:\Users\Toreme\AppData\Roaming\Typora\typora-user-images\image-20210720162241786.png)]
- 绝对定位是基于最近的一个定位了的父容器
  
  对于 “绝对定位的文字” 这个p，其定位了的父容器即 class=“absdiv” 的div
  所以 “绝对定位的文字” 这个p 出现的位置是以这个div 为基础的
- 如果没有定位了的父容器
  - “绝对定位的文字” 这个p 的父容器div，并没有定位。所以它的”最近的一个定位了的父容器” 即body
z-index

通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。

重复了，就存在一个谁掩盖谁的问题。这个时候就可以使用

z-index属性，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
- 大于等于0都浮于文字上方
相对定位
- 相对定位
  - 属性：position
    值： relative
    与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离
浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

属性：float
值： left,right
- 文字向右浮动
  - 文字向右浮动
    浮动后，原来的“坑”就让出来了
    并且是在原来的高度的基础上，向右浮动
- 文字向左浮动
  - 首先，向左浮动后，会把“坑”让出来，这个时候"正常的文字4“ 就会过来试图占这个坑，但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了
- 文字围绕图片
  - 当图片不浮动时，文字就会换行出现在下面
    当图片浮动时，文字围绕着图片
    和步骤2一样，当图片浮动的时候，就会让出这个“坑”出来，这个时候文字就试图去填补这个“坑”，结果发现，尼玛，图片没走，那就只好围绕图片摆放了
- 文字不想围绕图片
  - 不允许出现浮动元素
    属性:clear
    值: left right both none
    如果p左边出现了浮动的元素，如此例，则设置clear:left 即达到不允许浮动元素出现在左边的效果
- 水平排列div
  - 默认的div排列是会换行的
    如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
    如果超出了父容器，还会有自动换行的效果
显示方式

元素的display显示方式有多种，隐藏、块级、内联、内联-块级
- 隐藏
  - 在隐藏章节已经使用过通过display的方式隐藏一个元素
    
    display:none; 使得被选择的元素隐藏，并且不占用原来的位置
- 块级
  - display:block; 表示块级元素
    块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效
    
    div默认是块级元素
    span默认是内联元素(不会有换行,width和height也不会生效)
- 内联
  - display:inline; 表示内联元素
    内联元素前后没有换行，并且在其上的width和height也无效。其大小由其中的内容决定
    
    div默认是块级元素
    span默认是内联元素
- 内联-块级
  - 内联是不换行，但是不能指定大小
    块级时能指定大小，但是会换行
    
    有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block
- 其他
  - 其他的显示方式像
    list-item 显示为列表
    table 显示为表格
    inline-table 显示为前后无换行的表格
    table-cell 显示为单元格
    这些就不太常见了
水平居中
- 内容居中
  - 通过设置属性align=“center” 居中的内容
    
    通过样式style=“text-align:center” 居中的内容
- 元素居中
  - 默认情况下div会占用100%的宽度,所以无法观察元素是否居中
    
    设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中
    
    span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中
    
    span的居中可以通过放置在div中，然后让div text-align实现居中
左侧固定
1. 左侧固定，右边自动占满
  - 左边固定宽度
    
    右边自动填满
  - 当两个div高度宽度不一致时，float就会失效。
垂直居中
- line-height方式
  - line-height 适合单独一行垂直居中
- 内边距方式
  - 借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上
  - padding
- table方式
  - 首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
    这样对图片也可以居中，上一步 line-height就不能对图片居中。
左右固定
- 左右固定，中间自适应的布局
  - 左边固定宽度
    
    左边固定宽度
    
    中间自适应
贴在下方
- 一个div始终贴在下方
  - 首先将蓝色div设置为相对定位
    
    然后把内部的绿色div设置为绝对定位，bottom:0 表示贴在下面
块之间的空格
- 块之间有空格
  - 如果多个span连续编写，像这样：
    
    <span>连续的span</span><span>连续的span</span>
    
    是不会有空格的
    但是真正开发代码的时候，一般不会连续书写span,而是不同的span之间有回车换行，比如这样：
    
    <span>有换行的span</span>
    
    <span>有换行的span</span>
    
    <span>有换行的span</span>
    
    而这样编写代码，就会导致之间出现空格，中间加空格同理
- 解决办法
  - 使用float来解决。
    float使用完毕之后，记得在下面加上
    用于使得后续的元素，不会和这些span重复在一起
:pink
}
.right{
width:200px;
float:right;
background-color:pink
}
.center {margin:0 200px; background-color:lightblue}
```
<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
 <div class="center">中间自适应</div>

</head>

<body>

</html>
```
贴在下方
- 一个div始终贴在下方
  - 首先将蓝色div设置为相对定位
    
    然后把内部的绿色div设置为绝对定位，bottom:0 表示贴在下面
块之间的空格
- 块之间有空格
  - 如果多个span连续编写，像这样：
    
    <span>连续的span</span><span>连续的span</span>
    
    是不会有空格的
    但是真正开发代码的时候，一般不会连续书写span,而是不同的span之间有回车换行，比如这样：
    
    <span>有换行的span</span>
    
    <span>有换行的span</span>
    
    <span>有换行的span</span>
    
    而这样编写代码，就会导致之间出现空格，中间加空格同理
- 解决办法
  - 使用float来解决。
    float使用完毕之后，记得在下面加上
    用于使得后续的元素，不会和这些span重复在一起