前端与CSS | 青训营笔记

猫咪老师
62 阅读4分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

前端与CSS | 青训营笔记

CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

CSS引入方式

  • 内联式：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

  • 内嵌式：

    <head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

  • 外链式

    <link rel="stylesheet" href="index.css">

CSS常用布局和外观显示样式

  1. width：

    • 指定content-box的宽度
    • 取值为长度、百分数、auto
    • auto由浏览器根据其他属性确定
    • 百分数是相对于容器的content-box宽度

  2. height：

    同上。

  3. padding

    • 指定元素四个方向的内边距

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

    • 百分数相对于容器宽度

  4. border

    • 指定容器边框样式、粗细和颜色

      三种属性：

      border-width
border-style
border-color

      四个方向：

      border-top
border-right
border-bottom
border-left

  5. margin

    同padding，只不过指定的是元素的外边距

    margin-auto：水平居中

CSS基础选择器

  1. 标签选择器

    指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。例如：

    div {
	width:60px;
	height:60px;
}

  2. 类选择器

    类选择器可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签。使用"."进行标识，后面紧跟类名。例如：

    <p class='test'>test</p>

.test {
	font-size：14px;
}

  3. id选择器

    id选择器使用"#"进行标识，后面紧跟id名。例如：

    <p id="demo">demo</p>

#demo {
	color:blue;
}

  4. 通配符选择器

    通配符选择器用""号表示，""就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。例如：

    
* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

/* 上述代码清除所有HTML标记的默认边距。 */

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。

  1. 父级 子级 {

    属性:属性值;属性:属性值;

    } 例如：

    .class h3 {
color:red;font-size:16px;
}

image.png 2. 子元素选择器：父级标签写在前面，子级标签写在后面，中间跟一个 ">" 进行连接. 例如：

.class>h3 {
color:red;font-size:14px;
}

  1. 并集选择器：是各个选择器通过,连接而成的，通常用于集体声明。例如：

    .one, 
p , 
#test {color: #F00;}  

/* 表示.one 和 p 和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。 */

  2. 链接伪类选择器

    a:link  未访问的链接
a:visited  已访问的链接
a:hover  鼠标移动到链接上
a:active  选定的链接

CSS字体样式

  • font-size：设置字体字号

  • font-family：设置字体

  • font-weigh：设置字体粗细

    normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold  (数字表示粗细用的多)

  • font：综合设置字体样式

    选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

/* 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用。 */

CSS外观属性

  • color：定义文本的颜色

    预定义的颜色值	red，green，blue，pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

  • text-align：设置文本内容的对齐方式

    left	左对齐（默认值）
right	右对齐
center	居中对齐

  • line-height：设置行间距

行高与高度的三种关系：

  • 如果 行高 = 高度 垂直居中
  • 如果行高 > 高度 偏下
  • 如果行高 < 高度 偏上

​ (可以使用display:flex;布局方式让文字水平垂直居中)

  • text-decoration：文本的装饰

    none	默认，定义标准的文本，取消下划线
underline	定义文本下的一条线，下划线，也是链接自带的

CSS标签显示模式(display)

HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display: inline-block;

  • 常见的块元素有：

    <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，
其中<div>标签是最典型的块元素。

  • 常见的行内元素有：

    <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，
其中<span>标签最典型的行内元素。

  • 常见的行内块元素：

    <img>、<input >、<td>，
可以对它们设置宽高和对齐属性

image.png

CSS三大特性

  1. 层叠性

    • 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
    • 样式不冲突，不会层叠。

  2. 继承性

    • 子标签会继承父标签的某些样式，如文本颜色和字号。
    • 想要设置一个可继承的属性，只需将它应用于父元素即可。
    • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

  3. 优先级

image.png

​ （值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。）

avatar
文章
阅读
粉丝