ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

CSS学习总结

2021-05-15 17:01:18  阅读：165  来源： 互联网

标签：总结 元素 边框 学习 参数 10px border 选择器 CSS


CSS学习总结

一、什么是CSS

  • CSS是级联样式表（Cascading Style Sheets）的缩写。
  • HTML用于撰写页面的内容，CSS用于对页面进行布局和美化。
  • CSS可以对设置HTML元素的位置、距离、颜色、大小、浮动、透明度等。

二、CSS语法

h1 {color:blue; font-size:12px;}//元素选择器
#id {color:blue; font-size:12px;}//id选择器
.class {color:blue; font-size:12px;}//class选择器

一条CSS样式由两部分组成：选择器，以{}包裹的一条或多条声明

  • 选择器
    选择器是需要改变样式的对象
    选择器有三种：元素选择器，id选择器，class选择器
  • 元素选择器： 元素选择器前无符号，直接写对应HTML元素的元素符号，元素选择器的适用范围为所有的同种元素，如所有“h1”元素，所有“p”元素等等，因此元素选择器使用得较少。
  • id选择器： id选择器前有#号，#号后跟对应元素的id，因为元素的id唯一，所以id选择器的使用范围只有一个元素
  • class选择器： class选择器前有.号，.号后跟对应元素的class，id选择器的适用范围为含有相同class的所有元素。class选择器使用得较为普遍
  • 声明
    声明是对象需要改变的具体样式
  • 声明由{}包裹着，{}中可以包含一条或多条声明，多条声明之间用“;”分隔
  • 一条声明由“属性名+“:”+属性值”组成，属性是需要改变的样式属性，每个属性由一个值，属性和值用冒号分开

三、CSS生效

CSS生效有三种方法，分别是：外部样式表，内部样式表，内联样式
级联优先级是：（从高到低）
1.内联样式
2.内部样式表或外部样式表
（引入外部样式表的link标签和书写内部样式表的style标签，谁靠后谁优先级高）
3.浏览器缺省样式

1.外部样式表

  • 新建一个样式表文件，文件后缀名为.css
  • css样式表文件通常建立在相应html文件的同一目录下
  • 在html文件中，使用link标签即可引入外部的css样式表文件，并生效
  • 引入外部样式表是使用样式的主流方式，将众多样式规则单独放在一个文件中，于HTML内容分开，结构清晰，同时也可以被其他页面引入使用，达到复用的目的。

建立一个html文件，后缀为.html，并引入一个外部样式表mycss.css

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

建立一个样式表文件mycss.css，后缀为.css

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

2.内部样式表

  • 将样式放在html文件中，较少采用该方法
  • 在<head>元素中引入<style>标签，即可在上<style>标签中书写css样式
  • 用该方法编写的css样式只有在当前html文件中才可以生效，无法被其他html文件共用

建立一个html文件，并使用内部样式表

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

3.内联样式

  • 内联样式就是把样式规则直接写在要应用的元素中，如：
<h3 style="color:green;">I am a heading</h3>

内联样式使用起来最不灵活，因此极少使用内联样式

四、颜色

css中常用的表示颜色的方法：

1.网页的预定义色，使用英文单词进行颜色表示，如red，blue等
2.颜色RGB16进制值，如#ff0000
3.RGB三原色,如RGB(255,0,0)
4.RGB，使用百分号表示，如RGB(100%,0%,0%)
以上四种都属于RGB色系（红，绿，蓝）
其中前三种最为常用

css中可以用以上方法来设定前景或背景颜色
颜色的定义方式：
背景颜色：background-color:red;
字体颜色：color:red;

body{
background-color:gray;
}
h1{
color:red;
}

五、尺寸

我们可以用height和width设定元素内容占据的尺寸。
常见的尺寸单位有：像素px，百分比%等。
如：
新建html文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

新建对应的css文件：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

六、对齐

对于元素中的文本，我们可以设置text-align属性为left，center，right，分别对应左对齐，居中，右对齐，其中缺省的是左对齐。

七、盒子模型

盒子模型分为四层，从内到外分别是：内容（content），内边距（padding），边框（border），外边距（margin）

  • content： content部分为盒子的内容，如文本、图片等
  • padding： padding部分为盒子的内边距，即盒子的内容到边框之间的距离
  • border： border部分是盒子的边框，默认不显示
  • margin： margin部分是盒子的外边距，即盒子的边框和其他元素边框之间的距离，通常两元素之间取较大的一个外边距为两元素之间的距离

新建如下html文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>

再新建如下css文件：

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
.box2 {
  height: 300px;
  width: 300px;
  background-color:#004d61;
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;
  margin: 25px;
}
  • 在上面的示例中，height和width属性设置了content部分的宽度和高度；
  • border属性设置了边框的宽度，边框是否显示，边框的颜色
  • padding属性设置了内边距的宽度
  • margin属性设置了外边距的宽度

八、边框border

在css中，可以定义边框的宽度，样式，颜色和圆角

边框的样式

边框的样式可以用border-style属性来定义

边框的常用样式：

  • none：默认无边框
  • dotted：定义一个点线边框，即边框是由小圆点构成
  • dashed：定义一个虚线边框，即边框是由虚线构成
  • solid：定义一个实线边框，即边框是由实线构成
  • double：定义一个双实线边框，即边框是由两条实线构成，solid是由一条实线构成

边框样式属性不同参数代表的含义：

  • 一个参数：边框的四条边都是同一个样式；
  • 两个参数：第一个参数表示上下边框的样式，第二个参数表示左右边框的样式；
  • 三个参数：第一个参数表示上边框的样式，第二个参数表示左右边框的样式，第三个参数表示下边框的样式；
  • 四个参数：第一个参数表示上边框的样式，第二个参数表示右边框的样式，第三个参数表示下边框的样式，第四个参数表示左边框的样式。（沿顺时针方向）
border-style:dotted;//边框上下左右的样式都是点线边框dotted
border-style:dotted solid;//上下边框的样式是点线边框dotted，左右边框的样式是实线边框solid
border-style:dotted solid double;//上边框的样式是点线边框dotted，左右边框的样式是实现边框solid，下边框的样式是双实线边框double
border-style:dotted solid double dashed;//上边框的样式是点线边框dotted，右边框的样式是实现边框solid，下边框的样式是双实线边框double，左边框的样式是虚线边框dashed

边框的宽度

边框的宽度可以用border-width属性来定义，边框宽度的常用单位为像素px

边框宽度属性不同参数代表的含义：

  • 一个参数：边框四条边都是同样的宽度；
  • 两个参数：第一个参数表示上下边框的宽度，第二个参数表示左右边框的宽度；
  • 三个参数：第一个参数表示上边框的宽度，第二个参数表示左右边框的宽度，第三个参数表示下边框的宽度；
  • 四个参数：第一个参数表示上边框的宽度，第二个参数表示右边框的宽度，第三个参数表示下边框的宽度，第四个参数表示左边框的宽度。（沿顺时针方向）
border-width:5px;//边框上下左右的宽度均为5px
border-width:5px 10px;//上下边框的宽度为5px,左右边框的宽度为10px
border-width:5px 10px 15px;//上边框的宽度为5px，左右边框的宽度为10px，下边框的宽度为15px
border-width:5px 10px 15px 20px;//上边框的宽度为5px，右边框的宽度为10px，下边框的宽度为15px，左边框的宽度为20px

边框颜色

边框的颜色可以用border-color属性来定义

注意：border-color属性单独使用不起作用，需要先使用border-style属性来设置边框的样式，因此border-color属性需要和border-style属性一起使用才能生效。

常用的颜色表示方式有

1.网页的预定义色，使用英文单词进行颜色表示，如red，blue等
2.颜色RGB16进制值，如#ff0000
3.RGB三原色,如RGB(255,0,0)
4.RGB，使用百分号表示，如RGB(100%,0%,0%)

边框颜色不同参数代表的含义：

  • 一个参数：边框四条边的颜色都是同样的颜色；
  • 两个参数：第一个参数表示上下边框的颜色，第二个参数表示左右边框的颜色；
  • 三个参数：第一个参数表示上边框的颜色，第二个参数表示左右边框的颜色，第三个参数表示下边框的颜色；
  • 四个参数：第一个参数表示上边框的颜色，第二个参数表示右边框的颜色，第三个参数表示下边框的颜色，第四个参数表示左边框的颜色。（沿顺时针方向）
border-style: solid;
border-color: #0000ff;//边框上下左右的颜色都是蓝色
border-color: #ff0000 #0000ff;//上下边框的颜色是红色，左右边框的颜色是蓝色
border-color: #ff0000 #00ff00 #0000ff;//上边框的颜色是红色，左右边框的颜色是绿色，下边框的颜色是蓝色
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);//上边框的颜色是红色，右边框的颜色是绿色，下边框的颜色是蓝色，左边框的颜色是紫色

边框圆角

边框圆角可以用border-radius属性来设置，边框圆角常用的单位是像素px

边框圆角不同参数代表的含义：

  • 一个参数：边框四个角的圆角大小相同；
  • 两个参数：第一个参数表示左上角和右下角的圆角大小，第二个参数表示右上角和左下角的圆角大小；
  • 三个参数：第一个参数表示左上角的圆角大小，第二个参数表示右上角和左下角的圆角大小，第三个参数表示右下角的圆角大小；
  • 四个参数：第一个参数表示左上角的圆角大小，第二个参数表示右上角的圆角大小，第三个参数表示右下角的圆角大小，第四个参数表示左下角的圆角大小。（沿顺时针方向）
border-radius:5px;//四个圆角大小都是5px
border-radius:5px 10px;//左上角和右下角的圆角大小为5px，右上角和左下角的圆角大小为10px
border-radius:5px 10px 15px;//左上角的圆角大小为5px，右上角和左下角的圆角大小为10px，右下角的圆角大小为15px
border-radius:5px 10px 15px 20px;//左上角的圆角大小为5px，右上角的圆角大小为10px，右下角的圆角大小为15px，左下角的圆角大小为20px

以上四种属性设置的都是边框四条边的样式、宽度、颜色和四个角的圆角大小，无法单独设置某一条边框的样式、宽度、颜色和圆角。
下面这些属性可以实现单独对各条边和各个角进行设置：

//样式
border-top-style:solid;//上边框样式
border-bottom-style:solid;//下边框样式
border-left-style:solid;//左边框样式
border-right-style:solid;//右边框样式
//宽度
border-top-width:10px;//上边框宽度
border-bottom-width:10px;//下边框宽度
border-left-width:10px;//左边框宽度
border-right-width:10px;//右边框宽度
//颜色
border-top-color:#0000ff;//上边框颜色
border-bottom-color:#0000ff;//下边框颜色
border-left-color:#0000ff;//左边框颜色
border-right-color:#0000ff;//右边框颜色
//圆角
border-top-right-radius:10px;//右上角圆角
border-top-left-radius:10px;//左上角圆角
border-bottom-right-radius:10px;//右下角圆角
border-bottom-left-radius:10px;//左下角圆角

border属性

border属性可以同时设置边框的宽度，样式和颜色，

border属性不能分别定义边框四个方向的宽度，颜色和样式，只能统一定义，不能对四个边设置不同的值。与内外边距不同，内外边距可以分别定义四个边的值。

border:1px solid blue;//顺序可交换
//等价于
border-bottom:1px solid blue;
border-top:1px solid blue;
border-right:1px solid blue;
border-left:1px solid blue

九、内边距

内边距也被称为填充，用来定义元素边框与元素内容之间的宽度，用padding来表示。该空间可设置填充颜色，若内边距被清楚，所释放的空间将由背景颜色填充。

内边距可以统一设置四个边的宽度，也可以单独设置每条边的宽度。

  • 统一设置内边距宽度：
    不同参数代表的含义：
  • 一个参数：四个方向的内边距均相等；
  • 两个参数：第一个参数表示上下两个方向的内边距宽度，第二个参数表示左右两个方向的内边距宽度；
  • 三个参数：第一个参数表示上面一个方向的内边距宽度，第二个参数表示左右两个方向的内边距宽度，第三个参数表示下面一个方向的内边距宽度；
  • 四个参数：第一个参数表示上面一个方向的内边距宽度，第二个参数表示右面一个方向的内边距宽度，第三个参数表示下面一个方向的内边距宽度，第四个参数表示左面一个方向的内边距宽度。（沿顺时针方向）
padding:5px;//四个方向的内边距都是5px
padding:5px 10px;//上内边距是5px，左右内边距是10px
padding:5px 10px 15px;//上内边距是5px，左右内边距是10px，下内边距是15px
padding:5px 10px 15px 20px;//上内边距是5px，右内边距是10px，下内边距是15px,左内边距是20px
  • 单独设置内边距宽度：
padding-top:10px;//上内边距为10px
padding-bottom:10px;//下内边距为10px
padding-right:10px;//右内边距为10px
padding-left:10px;//左内边距为10px

十、外边距

外边距用来定义元素边框与其他元素边框之间的距离，用margin来表示。margin没有背景颜色，是完全透明度。

与内边距相似，外边距可以统一设置外边距宽度，也可以单独设置外边距宽度

  • 统一设置外边距宽度：
    不同参数代表的含义：
  • 一个参数：四个方向的外边距均相等；
  • 两个参数：第一个参数表示上下两个方向的外边距宽度，第二个参数表示左右两个方向的外边距宽度；
  • 三个参数：第一个参数表示上面一个方向的外边距宽度，第二个参数表示左右两个方向的外边距宽度，第三个参数表示下面一个方向的外边距宽度；
  • 四个参数：第一个参数表示上面一个方向的外边距宽度，第二个参数表示右面一个方向的外边距宽度，第三个参数表示下面一个方向的外边距宽度，第四个参数表示左面一个方向的外边距宽度。（沿顺时针方向）
margin:5px;//四个方向的外边距都是5px
margin:5px 10px;//上外边距是5px，左右外边距是10px
margin:5px 10px 15px;//上外边距是5px，左右外边距是10px，下外边距是15px
margin:5px 10px 15px 20px;//上外边距是5px，右外边距是10px，下外边距是15px,左外边距是20px
  • 单独设置外边距宽度：
margin-top:10px;//上外边距为10px
margin-bottom:10px;//下外边距为10px
margin-right:10px;//右外边距为10px
margin-left:10px;//左外边距为10px

十一、定位

元素的定位用position属性来表示，该属性有四个属性值，分别是：

  • static 静态
  • relative 相对
  • fixed 固定
  • absolute 绝对

static 静态

设置静态定位position：static

该定位是元素的默认定位方式

元素按从上到下，从左到右的方式排列

relative 相对

设置相对定位position：relative

该定位把元素相对于它的静态（正常）位置进行偏移，但是该元素原本所占的空间不会改变
即该元素的所占的空间不变，只是显示的位置发生偏移，元素原本所在的位置不会被其他元素占用。
也即相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。

元素内容有四个移动方向：top,bottom,left,right，
移动的单位是px

移动的距离可以为正，亦可以为负。

  • top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
  • bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
  • left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
  • right：距离为正时表示内容向左移动，距离为负时表示内容想右移动

fixed 固定

设置固定定位：position：fixed；

元素使用该定位后，位置固定不动，即使滚动窗口，元素的位置也不会改变
该定位是相对于浏览器窗口进行定位，
即使用该定位后，元素就固定在屏幕上的某个位置，不会随着页面的滚动而移动。

该定位也是使用top，bottom，left，right这四个属性进行定位，定位方式与上一个定位方式类似，只是相对于浏览器屏幕进行移动。
移动的单位是px

移动的距离可以为正，亦可以为负。

  • top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
  • bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
  • left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
  • right：距离为正时表示内容向左移动，距离为负时表示内容想右移动

注意：fixed定位的元素不占据空间，即fixed定位的元素与其他元素重叠。

absolute 绝对

设置绝对定位position：absolute；

绝对定位是相对于距离最近且设置了非static定位的父元素进行偏移，若没有父元素定义了非static定位，则相对于整个html进行偏移。

absolute定位也是使用top，bottom，left，right这四个属性进行定位，定位方式与相对定位方式类似，只是相对于有非static定位的父元素进行偏移
移动的单位是px

移动的距离可以为正，亦可以为负。

  • top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
  • bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
  • left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
  • right：距离为正时表示内容向左移动，距离为负时表示内容想右移动

注意：absolute定位的元素不占据空间，即absolute定位的元素与其他元素重叠。

十二、溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。

溢出属性有一下几个值：

  • visible 默认值，溢出部分不被裁剪，在区域外面显示
  • hidden 裁剪溢出部分且不可见
  • scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
  • auto 裁剪溢出部分，视情况提供滚动条

提示：还可以通过overflow-x和overflow-y单独设置左右方向和上下方向的滚动条。

十三、浮动

可以通过float属性来让元素在水平方向上进行向左或向右移动，周围其他元素也会重新排列。

float:left;//向左浮动
float:right;//向右浮动

float浮动往往用于图像，但它在布局时一样非常有用。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将会包围它，浮动元素之前的元素不受影响。

把几个浮动元素放在一起，如果有空间的话，他们将彼此相邻。

注意： 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

clear:both;//元素左右都不能有浮动元素
clear:left;//元素左边不能有浮动元素
clear:right;//元素右边不能有浮动元素

十四、不透明度

元素的不透明度可以用opacity属性来设置，opacity属性的值在[0.0～1.0]之间，值越低，透明度越高

不透明度的设置常用于图片

opacity:0;
opacity:0.2;
opacity:0.5;
opacity:0.7;
opacity:1;

十五、组合选择器

除了前面提到的三种常用的基础选择器之外，还有几种常用的组合选择器
组合选择器就是将前面的三种基础选择器进行组合，从而得到简洁精确的选择

这几种组合选择器分别是：

  • 后代选择器： 以空格作为分隔，如：.a .b
    后代选择器可以选择作为某元素后代的元素。
    这两个元素不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。即a选择器可能是b选择器的父选择器，也可能是b选择器的父选择器的父选择器，
.div1 p{
	color:red;
}
  • 子选择器： 以>作为分隔，如：.a>.b
    子选择器也称为直接后代选择器
    该选择器选择的后代一定是儿子，即a选择器一定是b选择器的父选择器
div>.red{
	color:red;
}
  • 交集选择器： 没有分隔，如：a.b
    交集选择器就是在两个标签相交的部分，也就是交集进行修改格式
    第一个选择器必须是标签选择器，第二个选择器必须是id选择器或class选择器
div.red{
	color:red;
}
  • 并集选择器： 以，作为分隔，如：.a,.b
    并集选择器是对两个标签同时进行修改样式
    使用并集选择器和分别使用两个选择器的效果是一样的，且分别使用的标签的样式完全一样。
div,red{
	color:red;
}

并集选择器和交集选择器的区别：
并集选择器选择的范围是两个选择器选中的所有元素，即A+B
交集选择器选择的范围是两个选择器共同选中的元素，即AB

十六、伪类和伪元素

伪类或伪元素用于定义元素的某种特定的状态或位置等。
比如：

  • 鼠标移到某元素上变换背景颜色
  • 超链接访问前后访问后样式不同
  • 离开必须填写的输入框时出现红色的外框进行警示
  • 保证段落的第一行加粗，其它正常
  • …
/* 选择器 : 伪类/伪元素{属性：属性值} */
selector:pseudo-class/pseudo-element {
  property:value;
}

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */

伪类

anchor伪类

anchor伪类可以用来设置链接不同状态的显示方式

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

first-child伪类

first-child伪类用来选择父元素的第一个子元素

匹配任意元素的第一个元素为<p>元素的<p>元素

即该<p>元素必须是第一个子元素

p:first-child
{
	color:blue;
}
匹配所有<p>元素中的第一个<i>元素
p>i:first-child
{
	color:blue;
}
匹配任意元素的第一个子元素为<p>元素中的所有<i>元素

即任意元素中，若<p>元素为该元素的第一个子元素，则匹配该<p>元素中的所有<i>元素

p:first-child i
{
	color:blue;
}

伪元素

:first-line伪元素

first-line伪元素用于为文本的首行设置特殊样式

p:first-line
{
	color:ff0000;
}

注意：“first-line” 伪元素只能用于块级元素。

:first-letter伪元素

first-letter伪元素用于向文本的首字母设置特殊样式

p:first-letter
{
	color:#ff0000;
}

注意： “first-letter” 伪元素只能用于块级元素。

:before伪元素

before伪元素可以在元素的内容前面插入新内容

h1:before
{
	content:url(smiley.gif);	
}

:after伪元素

after伪元素可以在元素的内容之后插入新内容

h1:after
{
	content:url(smiley.gif);	
}

标签：总结,元素,边框,学习,参数,10px,border,选择器,CSS
来源： https://blog.csdn.net/weixin_46023502/article/details/115804416

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有