css简单入门

CSS基础

简介

css：层叠样式表

  • 可以在html中内嵌CSS代码实现格式

    • 首先不建议这么做，更优方法是前后端分离
    • 利用标签<style></style>，在标签的范围内书写CSS代码
    • style标签放在head标签里面

  • 将html与CSS分离

    • CSS文件同样是如上面的<style></style>标签中的内容

      • 但是在单独的文件中无需再次使用style标签

    • 将其单独写进一个.css文件中

    • 然后需要将其链接到html文件中来

      • 在html文件中head标签中引入
    1
    2
    <link rel="stylesheet" href="./koncss.css">、
    <link rel="stylesheet" href="需要引入的css文件的位置">
    • 此时在浏览器中可以点击看到css文件
    • 建议使用html和css分离的方式

  • css中的注释是使用/*注释*/

CSS的优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利于SEO，容易被搜索引擎收录

导入方式

  • 内部样式表：css代码嵌套在html中

  • 外部样式表：css与html分离

  • 行内样式：在html的标签中利用style

1
<h1 style="color:red">xxx</h1>

  • 多种样式生效规则：覆盖原则，外部样式表的按照link引入的位置顺序

    • 从上到下按顺序执行，每次执行覆盖执行效果

  • 扩展：外部样式的两种写法

    • 链接式：link

    • 导入式：（CSS2.1）

1
2
3
<style>
@import url("需要导入的css的路径")
</style>
  • 弊端：顺序是先展示结构，在渲染效果。在网络卡顿或者网站庞大的时候这种先后效果会更加明显
  • 不推荐，还是建议使用链接式link

三种基本选择器

选择器的作用是选择页面上的某一个或者某一类元素。

基本选择器：

  1. 标签选择器

    • 会选择到页面中所有的相应标签
      • 选择器格式为标签名（如h1）
    • 选择所有有时候也是弊端

  2. 类选择器（class）

    • 首先在标签中可以添加class属性，class属性可以任意命名（应该有意义）

    • 然后通过class来选择

      • 选择器格式为.类名（.class）
    1
    2
    3
    4
    5
    <h1 class="ctitle">xxx</h1>
    .ctitle
    {
        color:red;
    }
    • 可以多个标签归类

  3. id选择器

    • 与类选择器类似，需要在标签中定义id，id也可以任意命名，然后通过id来选择
      • 选择器格式为#id
    • id必须保证全局唯一（是规范）
      • 如果有相同的id，还是能够使用

优先级：id选择器>class选择器>标签选择器

  • 多个选择器共用一个格式，就让选择器之间使用逗号,隔开

这些是最基本的选择器，还有更加高级的选择器。

  • id选择器选择到的是唯一确定的一个元素。

  • 类选择器和标签选择器返回的是元素的列表。如果只有一个元素也将会组织成列表的形式。

层次选择器

网页的结构是天然的一种树形结构。层次选择器适应这种树形结构。

  1. 后代选择器

    • 在某个元素的后面的所有元素（树形结构的后代关系）

    • 使用方法：当前标签 后代标签(中间有一个空格)

    • eg：body p{color:#xxxxxx}

  2. 子选择器

    • 在某个元素的后一代元素
    • 使用方法：当前标签>后代标签

  3. 相邻兄弟选择器（弟弟选择器，对下不对上，且只有一个）

    • 这需要选中许多标签中的一个元素，应该会使用到类选择器
    • 使用方法：当前元素+后代元素

  4. 通用选择器

    • 通用兄弟选择器，同样是对下不对上，但是选择所有（所有弟弟选择器）
    • 使用方法：当前元素~后代元素

结构伪类选择器

选择器选择到了某类元素之后，再加条件进行限定（增加条件来进行更加精准地定位）

1
2
ul li:first-child
ul li:last-child
  • 当前元素:first-child：当前元素的第一个子元素
  • 当前元素:last-child：当前元素的最后一个子元素
  • 当前元素:nth-child(x)：找到当前元素的父级元素，再找到父级元素的第x个子元素（无视标签类型），如果这个第x个子元素是与当前元素同标签，就选中生效。否则不生效。
  • 当前元素:nth-of-type(x)：选择父元素中第二个类型与当前元素相同的子元素。（与上相似，找子元素的时候考虑标签类型）

理解伪类：增加的条件限定（比如找到第几个元素，或者在某些情况下生效，像鼠标悬停，选中之类的）

属性选择

功能更加强大，可以使用正则表达式进行匹配操作。

选择器格式：属性[条件表达式]{声明}

  • 条件表达式中，可以使用正则表达式
    • 举例说明：
    • [attr="val"]：选择attr属性等于val的元素
    • [attr]：选择拥有attr属性的元素
    • [attr~="val"]：选择attr属性包含val（单词）的元素
    • [attr$="val"]：选择attr属性以val结尾的元素
    • [attr^="val"]：选择attr属性以val开头的元素
    • [attr*="val"]：选择attr属性任意位置包含val（字符）的元素
    • [attr|="val"]：选择attr属性的值开头为val（单词）或为val-（单词）的元素
    • [attr*="val" I(或者i)]：表示val不区分大小写（i 正则）
    • ...

盒子模型及边框使用

  • 盒子模型：就是一个类似于盒子的东西

    • margin：外边距
    • padding：内边距
    • border：边框

  • 很多元素有默认盒子的边距，例如body，h等等

    • 可以利用一系列初始化动作将其还原
1
2
3
4
5
h1,ul,li,a,body{
    margin:0;
    padding:0;
    text-decoration:none;
}
  • 盒子模型的参数可以直接指定，也可以分开上下左右来指定（上右下左）
  • 边框：border
    • border:粗细，边框样式，颜色
  • 外边距：margin
    • 外边距妙用：实现元素居中
      • margin:0 auto
      • 居中有要求，外元素是一个有宽度的盒子
  • 内边距：padding
  • 盒子元素：来确定整个元素的大小
    • margin+border+padding+内容宽度

display和浮动

  • 块级元素：独占一行
    • h1~h6 p div 列表...
  • 行内元素：不独占一行
    • span a img strong ...

行内元素可以包含在块级元素中，但是反之不可以。

  • display：有很多属性，可以修改元素的块级元素或者行内元素等，可以打破上面的规则
    • 重要属性值：
      • block：块元素
      • inline：行内元素
      • inline-block：即使块元素又是行内元素（是块元素，但是可以写在一行）
      • none：消失（但是在源码中是有的）
    • 是一种简单的行内元素的排列方式，但是在很多情况下使用的是float

浮动：元素浮动效果

  • float
  • 浮动的时候会边框塌陷，改变页面大小会造成排版失败等

overflow及父级边框塌陷问题

  • clear：对浮动的效果加以一些限制
    • right：清除右侧浮动（右侧不允许有浮动元素）
    • left：清除左侧浮动
    • both：两侧均不允许浮动
    • none：不clear

父级边框塌陷问题解决：

  • 增加父级元素的高度
1
2
3
4
#father{
    border:1px #000 solid;
    height:800px;
}
  • 在漂浮块后面增加一个空的div标签并清除浮动
1
2
3
4
5
6
7
<div class="xxx"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}

  • overflow：可以完成的效果是，在块元素设定了宽高的时候，内容如何显示的问题

    • 在默认情况下，会展现出所有内容，且内容可以超出边框
    • 使用overflow：
      • hidden：隐藏超出部分
      • scroll：形成滚动条的形式

  • 在父类中添加一个伪类：after

1
2
3
4
5
#father:after{
    content:'';
    display:block;
    clear:both;
}
  • 与增加空div标签的原理类似，只不过不用在html代码中增加空div，可以直接利用伪类完成

小结：

  1. 设置父元素高度
    • 简单，但是父元素有了固定的高度，会被限制
  2. 浮动元素后面增加空div
    • 简单，但是代码中加入空的div不太好
  3. overflow
    • 简单，但是在一些下拉，内容不能清除的地方不建议使用（因为丑）
  4. 在父类增加伪类
    • 简单，推荐使用

  • 对比

    • display：方向不可控

    • float：方向可控，但是会增加父级边框塌陷的问题

绝对定位和固定定位

绝对定位：基于xxx定位的情况，给定上下左右

  • 不在标准文档流中，原来的位置不会被保留

  • 在父级元素没有定位的情况下，相对于浏览器定位

    • 这种情况一般会使用后面的fixed

  • 如果父级元素有定位（即指定了position属性），相对于父级元素定位

    • 更过情况是这个

  • postion:absolute

  • 需要上下左右来确定元素如何偏移

    • top bottom left right

固定定位：

  • 直接定死，定死在画面中。也并非是相对于浏览器，而相对于屏幕画面（可以这样理解）

  • postion:fixed

  • 需要上下左右来确定元素如何偏移

    • top bottom left right

z-index以及透明度

类似于图层概念。

z-index来指定层级（0最小，往上递增）

  • 堆叠了才有图层的概念

透明操作：

  • 直接指定透明：透明度opacity
  • filter实现：filter:alpha(透明度)
    • 早期版本使用，历史了不建议使用
前端 > 基础
#css
css简单入门
http://example.com/2023/03/27/css简单入门/
作者
EverNorif
发布于
2023年3月27日
许可协议