前端 | 青训营笔记

懒洋洋学前端
107 阅读9分钟

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

CSS 基础

背景

  • 传统用HTML实现页面有很多不便的地方
    • 样式代码和内容代码放在一起，显得杂乱，不易阅读
    • 无法实现更好的效果
  • HTML与css之间的关系
    • HTML只负责页面的内容
    • css负责美化页面

概念

  • 层叠样式表-(cascading style sheet)
    • 层叠：css的一个特性
    • 样式：指标签的外观部分。比如尺寸、颜色、形状、字体等
    • 表：css的代码书写的表现形式类似于一张表
  • 作用： 书写css代码用于美化页面。

使用

  • css代码还是写在HTML页面里面
  • 3种使用方式
    • 嵌入:利用每个标签自带的style属性来设置样式
    • 内联：在<head></head>中添加<style></style>来写css代码 推荐
    • 外联:创建一个以.css为后缀的文件，在文件中书写css代码，在HTML页面中的<head></head>中通过<link href="css文件路径">引入css文件 推荐
<img src=""  style="css代码">

<style>
css代码

</style>

<link  href="css文件地址" />

css代码书写格式

  • css代码由选择器和属性构成

    css选择器{
    css属性名1: 属性值1;
    css属性名2: 属性值2;
    css属性名n: 属性值n;
}

  • css会通过选择器来找到需要设置样式的标签。设置对应的 样式（css属性）

css注释

  • /* 注释内容*/

css基础属性

  • 文字类

    • color: 设置标签的文本颜色。

    • font-size:设置字体大小。默认是跟浏览器有关，一般为16px，

    • font-family:设置标签文字的字体类型。默认字体跟系统有关。

    • text-decoration:设置文本的样式。默认超链接有下划线：

      • underline：下划线。超链接默认。
      • none:删除样式。
      • line-through:类似于删除线

    • text-align:设置标签内部内容的对齐方式，left、center、right。

    • font-weight:设置标签文字的粗细程度。可以取数字100~900, 可以使用bold、bolder

      font-weight:300  |bold |bolder

    • line-height:设置标签一行内容的高度，简称行高。 标签里的一行内容会显示在行高的中间。

      • 文字垂直居中：设置行高为和标签的高度一致。

    • @font-face:自定义字体

      • 计算机中每种字体就有自己的字体模板文件，一般后缀名是.ttf,.fon类的文件
      • 可以通过@font-face引入文件成为自定义字体
      /*引入了字体，并且设置了该字体的名字*/
@font-face{
    font-family:"字体的名字",
    src:url("字体文件的路径")
}
/*使用*/
p{
    font-family:"自定义字体名"
}

  • 尺寸类

    • width:设置标签的宽度，以像素或百分比为单位
    • height:设置标签的高度，以像素或百分比为单位
    • border:设置标签的边框。需设置边框的宽度、边框的样式、边框的颜色
      • border:1px solid red :1px的红色实线边框
      • border-left:2px dashed blue; 单独设置左边框
      • border-right: 单独设置右边框
      • border-top: 单独设置上边框
      • border-bottom: 单独设置下边框
    • padding：

  • 背景：

    • background-color:设置背景颜色

    • background-image:设置某个标签的背景图片

      选择器{
    background-image:url("图片路径")
}

    • background-size:cover:设置背景图片拉伸

    • background-position:设置背景图片的显示位置，分为x轴和y轴。默认坐标系原点是标签的左上角,x轴向右为正，y轴向下为正

      background-position:0px 0px;

    • background-repeat:设置背景图片是否平铺。默认是平铺(repeat). 不平铺(no-repeat)

  • 列表

    • list-style-type：设置列表项的图标样式。默认是circle，即小圆点。如果为none，则没有图标样式。是给ul设置的
    • list-style-image：设置列表项的图标为指定的图片。给ul设置
    • list-style-position:设置列表项图标的位置，内部或外面,不能设置具体的xy坐标
    • list-style:一个快捷的组合属性，可以同时设置list-style-type、list-style-image、list-style-postion
    list-style-image:url("图片地址");
list-style-position: inside;
list-style-type: lower-roman;
list-style:url("图片地址")  inside  lower-roman;
list-style:none;//没有图标

  • 其他

    • margin:0 auto;:特殊用法：用于将某个标签相对页面水平居中

    • outline:none:取消浏览器默认边框，针对表单元素

    • display:设置标签的显示模式。块级元素(block)、行内块级元素(inline-block)、行内元素(inline)、隐藏(none)

      display:block;
display:inline-block;

    • vertical-align:用于设置行内元素的垂直对齐方式。middle是居中

      vertical-align:middle;

    • cursor:设置鼠标样式. 小手：pointer

      cursor:pointer;

    • opacity:设置标签的透明度，范围为0~1 .0为完全透明，1完全不透明

  • color、font-size属性对标签以及其子标签都有效果

body{
    color:white;
    width:100px;
    height:50%;
}

css基础选择器

  • 标签选择器

    标签名{
    css属性名1: 属性值1;
}
例如： 
body{
    background-color: black;
}
效果：对页面所有的body设置背景颜色为黑色
    • 会对页面上所有同类型的标签设置样式
    • 应用：给同类型标签设置通用样式

  • id选择器

    • 能够对单独的某个标签设置样式
    • 步骤
      • 给需要单独设置样式的标签添加id属性
      • 利用css的id选择器来设置样式
    html:
<td id="logo"></td>
css: 
#id属性值{
    css属性名1: 属性值1;
}
例子： 
#logo{
    text-align:left;
}
效果：会对id属性为logo的标签设置其内容左对齐
    • 同一个页面不允许有一样的id属性。

  • class选择器

    • 对具有相同class属性的多个标签同时设置样式

    • 步骤

      • 给需要设置样式的这些标签设置一样的class属性。 class属性每个标签都可以设置
      • 利用class选择器来进行设置
      .class属性值{
 css属性名1: 属性值1;
}
例子： 
.demo{
    color:white;
}
效果：对class属性为demo的所有标签设置文字颜色为白色。
      • 特别适合页面上多个标签有同样的样式的情况。

    • 组合选择器

      • 概念：同时使用id、class、标签选择器中的一种或多种，来达到给多个标签设置样式的目的
      • 作用：减少不必要的class代码
      • 思路：利用标签的嵌套关系来精确寻找需要设置样式的标签
      • 例子
      找到所有table标签里的a标签，字体颜色为白色
table a{
    color:white;
}
找到所有body标签下的class为item的标签，字体颜色为红色
body .item{
    color:red;
}

    • 伪类选择器

      • 根据用户鼠标的行为来改变标签的样式

      • 分类

        • a:link:超链接专属，页面一打开超链接就有的样式，旧属性
        • a:visited:超链接专属,超链接被访问之后的样式，
        • :hover:鼠标悬停到标签上时标签使用的样式
        • :active:鼠标点击标签不释放时使用的样式
        • :focus:当标签获取鼠标焦点时使用的样式。比如点击输入框

      • 使用语法

        a:link{
    css属性名1: 属性值1;
}
a:visited{
    css属性名1: 属性值1;
}
非伪类选择器:hover{
    css属性名1: 属性值1;
}
非伪类选择器:active{
    css属性名1: 属性值1;
}
非伪类选择器:focus{
    css属性名1: 属性值1;
}

选择器命令规范

  • id属性、class属性

    • 尽量能体现标签的作用

    • 不能以数字开头

      <a id="head-logo"></a>

css 技巧

  • 用极小的图片配合background-repeat实现整个的背景图

HTML标签的显示模式

  • 块级元素 ：block
    • 指的是独占一行的标签：p h1~h6 table tr ul ol dl li hr
  • 行内块级元素： inline-block
    • 指的是同行显示，但可以设置宽高的标签：input textarea select button img
  • 行内元素：inline
    • 指的是可以同行显示的标签: a span
    • 行内元素中 是默认不能设置宽高的
  • 显示模式可以通过display来进行转换

如何让背景图片居中

如何让两个行内元素对齐

细节

  • input带有默认的padding
  • button的height、width默认是包含了padding和border
  • ul有默认的16px的margin，以及40px的左padding
  • div的高度默认是由子标签来决定的。一般高度刚好容下所有的子标签(不包含css定位的子标签)

图文混排

  • 图片跟文字居中对齐

    给图片设置css：
vertical-align:middle;

line-height和vertical-align之间的区别

  • line-height用于设置标签内部一行内容的垂直对齐。设置为标签的高度可以实现内部一行内容垂直居中
  • vertical-align用于设置行内元素之间的垂直对齐方式。设置vertical-align：middle可以实现行内元素之间居中对齐（一般是参考图片或表单元素）
  • 技巧：父标签里的行内元素垂直居中：给父标签设置line-height:父标签高度. 给里面的所有子标签设置vertical-align:middle

行内（行内块级）元素，如果代码之间换行，那么页面两个标签中间会有一个空格

  • 解决：给父标签设置font-size为:0.如果子标签有文字，就单独给子标签设置font-size

margin: 0 auto;是针对块级元素的，如果是行内元素用text-align

当给紧挨块级父元素的子标签设置margin-top时，会带跑其父标签。

  • 给父标签设置overflow:hidden;

文字竖向排列

css:  writing-mode:tb-rl;

input修改placeholder样式

input::placeholder{
    color:cornflowerblue;
}
input:focus::placeholder{
    color:blue;
}

子div水平垂直居中于父div

1. 水平居中
  	1. 用margin：0 auto实现水平居中;
2. 垂直居中
  	1. 设置子标签的margin-top实现垂直居中
3. 绝对水平垂直居中--- 绝对方式

margin:auto;
position:absolute;
top:0;
left:0;
rigtht:0;
bottom:0;
  • 需要给父标签设置定位，非static

总结：对于水平垂直居中

1. 要剧中的是行内(行块)元素
  	1. 水平：text-align
  	   2. 垂直：line-height 配合 vertical-align
2. 要居中的是块级元素
       	1. 水平：margin：0 auto;
       	2. 垂直:绝对定位方式

如果想要实现子div在父标签中使用绝对定位，建议给父标签设置相对定位，这样就不会对页面其他标签产生影响，简称子绝父相

当 某个标签内部字母没有自动换行的时候，可以添加word-wrap：break-Word来强制换行

word-wrap：break-word;
avatar
文章
阅读
粉丝