CSS基础

最新推荐文章于 2020-05-30 15:20:39 发布

sm_77777

最新推荐文章于 2020-05-30 15:20:39 发布

阅读量142

点赞数

分类专栏： CSS 前端基础

本文链接：https://blog.csdn.net/sm_77777/article/details/82559540

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

基础

5 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

CSS

Cascading Style Sheets
层叠样式表

h1 {
      color: red;
      font-size: 20px;
      }

注释

/* 这是单行注释 */

/*
 这是多行的
 注释
*/

辅助阅读注释
单行代码注释
多行代码注释

如何在HTML代码中加入CSS样式

行内方式

在标签内给元素添加样式
例如：<div style="color: red;">颜色为红色</div>
有两大缺点：
①样式和结构混在一起，只能改变当前标签的样式，无法做到批量修改；
②冗余，代码变得很多很繁杂，阅读起来很不方便，后期维护也很困难。
使用情况：少量使用js改变样式的时候使用。

内嵌方式

通过在<head>中使用<style>来定义
例如：

<head>
  <style type="text/css">
       div{
            color: red;
         }
   </style>
 </head>

使用情况：写简单的demo的时候或者在移动端追求性能优化时使用。

外链方式

通过在<head>中使用<link>来引入
例如：

<head>
     <link rel="stylesheet" type="text/css" href="style.css">
</head>

使用情况：最常见以及最推荐的方式，维护性良好。
优点：如果多个页面共用一个CSS文件的话，一般只在第一次加载时需要下载，以后切换页面不需要加载该文件（浏览器有缓存），提高页面打开速率。

导入方式

@import导入，仅作了解，不使用。
引入方式：

 <style>
    @import url(style.css);
 </style>

HTML和CSS调试

打开调试工具

快捷键：f12
右键菜单：检查
浏览器入口：开发者工具

HTML调试

树结构
选中元素
修改

CSS调试

查看样式
修改样式
新增样式

CSS选择器

选中需要添加样式的元素

选择器分组
作用：简化代码。

h1,div,span{
     color: #333;
     font-family: "微软雅黑";
}

基础选择器（元素选择器、ID选择器、类选择器、*选择器-通用选择器）

p{
   color: red;
}/*元素*/
#green{
    color: green;
}/*id*/
.fs14{
     font-size: 14px;  
}/*类class-应用于多个元素，可以组合使用*/
*{
     margin： 0;
     padding: 0;
}/*html元素里的所有元素*/

关系选择器

父子关系、兄弟关系、后代关系（父子之后的又一代）

.block p{
     color: red;
}/*后代选择器*/
.block > p{
     color: red;
}/*子元素选择器*/
p ~ div{
     width: 200px;
}/*兄弟选择器，后面的所有兄弟元素*/
p + div{
     width: 200px;
}/*兄弟选择器，紧跟其后的一个兄弟元素*/

伪类选择器

四种常见的状态伪类：
link：设置a元素在未被访问前的CSS样式
visited：设置a元素链接已被访问过时的CSS样式
hover：设置a元素在鼠标悬停时的CSS样式
active：设置a元素在点击与释放之间的时候的CSS样式

a:hover{
     color: blue;
}/*选择器：关键字*/

结构性伪类：

<ul class="list">
   <li class="item">HTML</li>
   <li class="item">CSS</li>
   <li class="item">JS</li>
   <li class="item">Node.js</li>
   <li class="item">Web</li>
</ul>
.item:first-child
.item:last-child
.item:nth-child(n)
.item:nth-last-child(n)
/*  n可以为数字（4）、关键字（odd,even）、公式（2n+1） */

属性选择器

[attribute] – 用于选取带有指定属性的元素
[attribute=value] – 用于选取带有指定属性和值的元素
[attribute^=value] – 匹配属性值以指定值开头的每个元素
[attribute$=value] – 匹配属性值以指定值结尾的每个元素
[attribute*=value] – 匹配属性值中包含指定值的每个元素
[attribute~=value] – 用于选取属性值中包含指定词汇的元素
[attribute|=value] – 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
具体用法如下：

/* 选中 title 属性链接 */
a[title] {}

/* 选中新窗口打开的链接 */
a[target="_blank"] {}

/* 选中 html */
a[href$=".html"] {}

/* 选中绝对路径链接 */
a[href^="http://"],a[href^="https://"] {}

伪元素选择器

::first-letter /*第一个字*/

::first-line /*第一行*/

::before /*在之前*/

::after /*在之后*/

属性和值

字体相关属性

font-family:字体
font-size:尺寸
font-style:样式
font-weight:粗细

具体可在MDN上查找。

单位：
像素（px）-- 绝对单位 / 百分比（%、em）-- 相对单位
1em等于父元素设置的字体大小。
rem是基于根元素html的font-size来计算的

颜色：

.overlay{
    background-color:rgba(0,0,0,0.7);
}/*rgb，范围0-255*/
 /*a表示透明度，0-1.0*/

除了常用的颜色关键词以外，还有两个关键词：

transparent：
使用color的颜色值，如果该元素没有设置，则继承父级元素的color。
currentColor：
透明色。

CSS盒子

盒模型（由内到外）

内容区域：width,height
内边距：padding
边框：border
外边距：margin

boxing-sizing:
content-box（实际内容宽高就是设定的width和height）
border-box（实际内容宽高是width和height减去对应的border和padding值）

属性：top\right\bottom\left

实例：

.box{
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 20px;
}

或者

.box{
      margin: 10px 20px 10px 20px;
}/*上 右 下 左*/

或者

.box{
      margin: 10px 20px 30px;
}/*上 左右 下*/

或者

.box{
      margin: 10px 20px;
}/*上下 左右*/

元素的显示隐藏

display

1.所有的后代元素都隐藏
2.好像这个元素不存在一样

visibility

1.元素的大小不变，可理解为透明
2.子元素设为visibility:visible，则该子元素依然可见

overflow

1.规定了当内容元素溢出父容器时的展现形式
2.裁剪内容，使用滚动条来显示或直接显示超出部分

背景图片

通过img元素直接使用图片
通过background-image（背景图片）的形式使用
多多利用简写

.box{
     height: 400px;
     background-color: #e8e8e8;
     background-image: url('background.jpg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 100px 100px;
}

简写后：

.box{
     height: 400px;
     background: #e8e8e8 url('background.jpg') no-repeat center center/100px 100px;
}

雪碧图

CSS Sprite–CSS精灵
把小的背景图片合并成一张大的图片，减轻浏览器的加载负担，然后按照想要的小图片的位置来调用图片。

.box{
    background-position: -60px -60px;
}/*将图片右移60px，上移60px*/

背景渐变--线性

.gradient{
    background: linear-gradient(orange,yellow);
}/*最基础的渐变，从上到下*/

.gradient{
    background: linear-gradient(to right,orange,yellow);
}/*从左到右的渐变*/

.gradient{
    background: linear-gradient(135deg,orange,yellow);
}/*角度的渐变*/

.gradient{
    background: linear-gradient(to right,red,orange 50%,yellow,white);
}/*等间距的颜色的渐变*/

.gradient{
    background: linear-gradient(to right,red,orange,yellow,white);
}/*设置指定位置的渐变*/

.gradient{
    background: repeating-linear-gradient(-45deg,blue,blue 5px/*一条宽5px的蓝色线条*/,white 5px,white 10px);
}/*重复的线性渐变*/

背景渐变--径向

.gradient{
    background: radial-gradient(red,orange,yellow);
}/*等间距色标*/

.gradient{
    background: radial-gradient(red 5%,orange 15%,yellow 60%);
}/*指定间距色标*/

.gradient{
    background: radial-gradient(at 30px 30px,red 5%,orange 15%,yellow 60%);
}/*指定中心点位置*/

.gradient{
    background: radial-gradient(circle,red,orange,yellow);
}/*指定渐变形状*//*默认是椭圆*/

.gradient{
    background: radial-gradient(circle closest-side,red,orange,yellow);
}/*指定渐变尺寸*//*closest-side farthest-side closest-corner farthest-corner*/

.gradient{
    background: repeating-radial-gradient(red,orange 10%,yellow 25%);
}/*重复的径向渐变*/

CSS的样式计算

浏览器默认样式
属性越通用，被继承的可能性越高

样式的层叠

元素声明的样式的权重高于浏览器默认样式
浏览器默认样式的权重高于继承的样式
width属性不能继承

样式优先级

style>id选择器>类选择器-属性选择器-伪类选择器>元素选择器-伪元素选择器>*（通用选择器）
组合选择器中，从最高级的开始比较

p{
   color: red !important;
}/*最高级别，不建议使用*/

CSS Reset（CSS 重置）

normalize.css-纠正

h1{
   margin: 0.67em 0;
}

Eric Meyer’s "Reset CSS"2.0-清零

h1{
   margin: 0;
}

通过Can I use来查看浏览器的技术支持状况

sm_77777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSS盒子盒模型（由内到外）内容区域：width,height 内边距：padding 边框：border 外边距：marginboxing-sizing: content-box（实际内容宽高就是设定的width和height） border-box（实际内容宽高是width和height减去对应的border和padding值）属性：top\right\bottom\...
复制链接

扫一扫