CSS学习笔记

CSS

1、 什么是CSS

Cascading Style Sheet(层叠/级联样式表)

层叠：多个样式可以作用在同一个html的元素上，同时生效

2、作用

表现层,美化网页

  • 内容
  • 字体
  • 颜色
  • 边距
  • 宽高
  • 背景图片
  • 网页浮动
  • ...

3、优势

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

4、CSS的三种导入方式

  • 内部样式
  • 外部样式
  • 行内样式



    
    Title

  
  

  

  

  








标题

拓展：外部样式的两种写法

  • 链接式：link标签，只能在html源代码中使用

  • 导入式：

    @import是 CSS2.1 特有的

    首页link和import语法结构不同，前者 link 是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要 style 标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。

    本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

5、(重点)选择器

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

5.1、基本选择器

? 优先级： 不遵循就近原则，id选择器 > class选择器 > 标签选择器

1、标签选择器

? 格式：标签{}，会选择到页面上所有的这个标签的元素




    
    Title

  




学java


学汇编


学Python


学C++

2、类选择器

CSS 类选择器 (w3school.com.cn)

? 格式: .class名称{}，好处,可以多个标签归类,是同一个class




    
    Title

    




标题1


标题2


标题3


标题4



标题5

3、ID选择器

CSS id 选择器 (w3school.com.cn)

? 格式: #id名称{}， ID必须保证全局唯一!




    
    Title

  





标题3


标题4

5.2、高级选择器

1、层次选择器




p1


p2


p3

    

    
  
  • 
    
    p4
    
  
    • 
  
  • 
    
    p5
    
  
    • 
  
  • 
    
    p6
    
  
    • 
  
    p7与li同级
    


    

p8


p9
后代选择器

在某个元素的后代所有的同类标签

 /* 1. 后代选择器,选择后代中所有的同类标签,ul标签的id为u_list*/
    #u_list p{
      color: #dc1428;
    }
子选择器

选择下一个层次的标签

/* 2. 子选择器,选择下一个层次的同类标签，ul标签的id为u_list */
    #u_list > li{
      color: crimson;
    }
相邻兄弟选择器

弟弟选择器,不选自己

 /* 3. 相邻兄弟选择器 同辈,对下不对上(弟弟选择器)，p2和p8的class都是active */
    .active + p{
      color: crimson;
    }
通用选择器

所有弟弟选择器，不选自己

/* 4. 通用选择器 选择所有同辈,对下不对上(所有弟弟选择器)*/
    .active ~ p{
        color: crimson;
    }

2、结构伪类选择器(带冒号，不常用)

CSS 类选择器详解 (w3school.com.cn)




    
    Title
    
  



    

h1


p1


p2


p3


    
  
  • li1
    • 
  
  • li2
    • 
  
  • li3
    •

3、属性选择器（常用）




    
    Title

    



  

    
    链接1
    链接2
    链接3
    链接4
    链接5
    链接6
    链接7
    链接8
    链接9
  

  

  

  

  

  

  

  

  

    
标题1

6、美化网页元素

6.1、span标签




    
    Title
  



欢迎学习java

6.2、字体样式

CSS 字体 (w3school.com.cn)




    
    Title

  




故事简介

Thank you!

“潘子！”我惊了一下，但是没法靠过去看。

对方道：“小三爷，快走。”声音相当微弱。

接着我听到一连串的咳嗽声。“你怎么样？”我问道，“你怎么会在这儿？”

潘子在黑暗中说道：“说来话长了，小三爷，你有烟吗？”“在这儿你还抽烟，不怕肺烧穿？”

我听着潘子的语气，觉得他特别地淡定，忽然起了一种非常不详的预感。

6.3、文本样式

一般都是现用现找

CSS 文本 (w3school.com.cn)

1、颜色
2、文本对齐方式
3、首行缩进
4、行高
5、装饰

6.4、超链接伪类

CSS 伪类 (w3school.com.cn)

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

6.5、列表




    
    Title

  








#nav{
    width: 200px;
}
.title{
    color: #d61326;
    /*粗体*/
    font-weight: bold;
    /*首行间距*/
    text-indent: 1cm;
    /*行高*/
    line-height: 35px;
    background: cyan;
}

ul li{
    height: 30px;
    /*无列表样式*/
    list-style: none;
    /*首行间距*/
    text-indent: 1cm;
    background: #dcd914;
}

a{
    /*无下划线*/
    text-decoration-line: none;
}

6.6、背景图像

CSS 背景图像 (w3school.com.cn)

CSS 背景简写 (w3school.com.cn)

在使用简写属性时，属性值的顺序为：

  • background-color 颜色
  • background-image 图像
  • background-repeat 平铺方式
  • background-attachment
  • background-position
属性 描述
background 在一条声明中设置所有背景属性的简写属性。
background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip 规定背景的绘制区域。
background-color 设置元素的背景色。
background-image 设置元素的背景图像。
background-origin 规定在何处放置背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置背景图像是否及如何重复。
background-size 规定背景图像的尺寸。

6.7、渐变

CSS 渐变 (w3school.com.cn)

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

  • 线性渐变（向下/向上/向左/向右/对角线）
  • 径向渐变（由其中心定义）

如需创建线性渐变（默认从上到下），您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

7、盒子模型

7.1、margin：外边距

CSS 外边距 (w3school.com.cn)

CSS 拥有用于为元素的每一侧指定外边距的属性：(默认顺序 上右下左 顺时针)

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

提示：允许负值。

7.2、padding：内边距

CSS 内边距 (w3school.com.cn)

CSS 拥有用于为元素的每一侧指定内边距的属性：（默认顺序 上右下左 顺时针）

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

所有内边距属性都可以设置以下值：

  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距

提示：不允许负值。

7.3、border：边框

默认顺序 -> border: (线宽 样式 颜色)

CSS 边框 (w3school.com.cn)

1、边框宽度width

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick

2、边框样式style

border-style 属性指定要显示的边框类型。

允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

3、边框颜色color

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

  • name - 指定颜色名，比如 "red"
  • HEX - 指定十六进制值，比如 "#ff0000"
  • RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
  • HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
  • transparent

注释：如果未设置 border-color，则它将继承元素的颜色。

7.4、圆角边框和阴影

CSS 圆角边框 (w3school.com.cn)

圆角边框border-radius

属性用于向元素添加圆角边框

p {
  border: 2px solid red;
  border-radius: 5px;
}

CSS 阴影效果 (w3school.com.cn)

  • text-shadow
  • box-shadow
文字阴影text-shadow

CSS text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）

h1 {
  text-shadow: 2px 2px red;
}
盒子阴影box-shadow

CSS Box Shadow (w3school.com.cn)

div {
  box-shadow: 10px 10px 5px grey;
}

7.5、浮动(会离开当前图层)

1、块级元素,独占一行
h1-h6   p   div  列表...
2、行内元素,不独占一行
span   a   img   strong...

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

3、display

CSS 布局 - display 属性 (w3school.com.cn)

display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block (块级)或 inline（行内）。

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
... ...
4、浮动float

CSS 布局 - 浮动和清除 (w3school.com.cn)

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
  • inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;









Clearfix



在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：




  W3School
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...




请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：




  W3School
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...

但是，新的现代 clearfix hack 技术使用起来更安全,使用伪类 :after

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

7.6、定位

CSS 布局 - position 属性 (w3school.com.cn)

所有 CSS 定位属性

属性 描述
bottom 设置定位框的底部外边距边缘。
clip 剪裁绝对定位的元素。
left 设置定位框的左侧外边距边缘。
position 规定元素的定位类型。
right 设置定位框的右侧外边距边缘。
top 设置定位框的顶部外边距边缘。
z-index 设置元素的堆叠顺序。
1、相对定位 position: relative

CSS 相对定位 (w3school.com.cn)

相对原始的位置偏移

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。仍然在当前图层（文档流）

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}
2、绝对定位 position: absolute

CSS 绝对定位 (w3school.com.cn)

1、父级元素不存在定位（父级元素没有position属性）的情况下，相对于浏览器定位

2、父级元素存在定位的情况下，相对于父级元素定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}
3、固定定位 position:fixed

相对于浏览器位置偏移

p.one
{
position:fixed;
left:5px;
top:5px;
}
4、设置当前图层层级 z-index
学习笔记

相关

Git--学习笔记（三）远程仓库克隆到本地

[学习笔记] 整数规划之割平面法 How and why?

计网学习笔记(5) - 物理层与媒介

selenium python学习笔记之八 窗口截图、验证码处理

AntDesign vue学习笔记（三）嵌套路由使用

vue学习笔记（一）--来源尚硅谷

【学习笔记】TSlib校准原理

Go语言核心36讲（Go语言实战与应用六）--学习笔记

docker 学习笔记-7

SpringMVC学习笔记

Spring 学习笔记

[机器学习笔记(一)] TensorFLow安装

标签