【CSS】CSS入门笔记第一弹~

分类：CSS作者：东非不开森

一起快乐的学习吧~

预学知识HTML：小白学习笔记之HTML

CSS

一、css简介

1.1.初识CSS
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
    有时我们也会称之为 CSS 样式表或级联样式表。

CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML,让 HTML 更漂亮， 让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离

1.2.语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

  1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
  2. 属性和属性值以“键值对”的形式出现
  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  4. 属性和属性值之间用英文“:”分开
  5. 多个“键值对”之间用英文“;”进行区分
<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>
1.3.CSS代码风格
1.3.1.样式格式书写
  1. 紧凑格式
h3 { color: deeppink;font-size: 20px;}
  1. 展开格式
  h3 {
            color: pink;
            font-size: 20px;    
         }

强烈推荐第二种格式， 因为更直观。

1.3.2. 样式大小写风格

1.小写格式

 h3 {
       color: pink;
        }

2.大写格式

 H3 {
        COLOR: PINK;   
       }

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

1.3.3. 样式空格风格
 h3 {
            color: pink;    
        }

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

二、CSS基础选择器

2.1. 标签选择器
  • 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
/* 标签选择器：标签名 */
属性：属性值
        ...
p {
  color: aquamarine;
}
div {
  color: mediumorchid;
        }
2.2. 类选择器（最常用）
  • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
  • 长名称或词组可以使用中横线来为选择器命名。
  • 不要纯数字、中文等命名， 尽量使用英文字母来表示。
.类名  {   
  属性1:属性值1; 
  属性2:属性值2; 
  属性3:属性值3;     
}
/* 类选择器口诀：样式点定义 结构类<class>调用 一个或多个 开发最常用 */
2.3. id选择器
  • id选择器使用#进行标识，后面紧跟id名
  • 元素的id值是唯一的，只能对应于文档中某一个具体的元素
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>
2.4. 通配符选择器
  • 通配符选择器用号表示， 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
    下面指清除所有的元素标签的内外边距 
* {
     margin: 0;
     padding: 0;
        }

三、css字体属性

3.1.font-size 字体大小
  1. px（像素）大小是我们网页的最常用的单位
  2. 谷歌浏览器默认的文字大小为16px
  3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  4. 可以给 body 指定整个页面文字的大小
h2 {
     font-size: 16px;
        }
3.2.字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细

● normal 默认值
● bold 定义加醋  700
● 100-900  400=normal 700=bold
p {  
     font-weight: bold; 
    }
3.3.字体样式

CSS 使用 font-style 属性设置文本的风格。

● normal 默认值
● italic 斜体
● 平时很少加斜体 反而要给斜体标签<em></em>改为正常字体
p {  
        font-style: normal;
    }
3.4.font-family 字体系列

最好是英文

h2 {
  font-family: "Microsoft YaHei";
}
p {
  font-family: "Times New Roman",'Times New Roman', Times, serif;
        }
3.5.font复合属性

顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

body {   font: font-style  font-weight  font-size/line-height  font-family;}

四、文本属性

4.1.color 文本颜色

color 属性用于定义文本的颜色

div {
  /* color: deeppink; */
  /* color: rgb(252,209,209); */
            color: #71ee94;
4.2.text-align 文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式。

h1 {
  /* text-align: center; */
  /* text-align: right; */
  text-align: left;
        }
4.3.text-decoration修饰文本
div {
  /* 下划线 */
  /* text-decoration: underline; */
  /* 删除线 */
  text-decoration: line-through;
  /* 上划线 */
  text-decoration: overlines;
        }
4.4.text-indent 文本缩进

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小,如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

div { 
        text-indent：20px；
    }
    div { 
        text-indent：2em；
    }
4.5.line-height 行高

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

div {
       line-height: 16px;
        }

五、CSS样式表

5.1.行内样式表 很少使用

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
5.2.内部样式表 使用还行

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个

<style>
          div {
               color: red;
               font-size: 12px;
                }
 </style>
5.3.外部样式表 最多使用

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

引入外部样式表分为两步：

  1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
  2. 在 HTML 页面中，使用 标签引入这个文件。
<link rel="stylesheet"  href="css文件路径">

六、Chrome调试工具

  1. Ctrl+滚轮 可以放大开发者工具代码大小。
  2. 左边是 HTML 元素结构，右边是 CSS 样式。
  3. 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
  4. Ctrl + 0 复原浏览器大小。
  5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
  6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

七、emmet语法

7.1.emmet语法简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。

7.2.快速生成HTML结构语法
  • 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
  • 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
  • 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
  • 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
  • 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
  • 如果生成的div 类名是有顺序的， 可以用 自增符号 $
  • 如果想要在生成的标签内部写内容可以用 { } 表示
7.3.快速生成CSS样式语法

CSS 基本采取简写形式即可

  • 比如 w200 按tab 可以 生成 width: 200px;

  • 比如 lh26px 按tab 可以生成 line-height: 26px;

7.4.快速格式化代码

Vscode 快速格式化代码: shift+alt+f

也可以设置 当我们 保存页面的时候自动格式化代码:

  1. 文件 ------.>【首选项】---------->【设置】；

  2. 搜索emmet.include;

  3. 在settings.json下的【工作区设置】中添加以下语句：

	"editor.formatOnType": true,

​	"editor.formatOnSave": true

八、CSS复合选择器

8.1.后代选择器 重要

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素一 元素二 {样式声明}

/* ol里面的li改为pink */
ol li {
  color: pink;
      }
8.2.子选择器 重要

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素

元素1 >元素二 {样式声明}

.nav > a {
  color: pink;
      }
8.3.并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1，元素二{样式声明}

/* 熊大熊二为粉色1，小猪一家为粉色 */
div,p,.pig li {
  color: pinksss;
}
      /* 约定的语法规范，用逗号隔开，最后一个不需要，我们并集选择器喜欢竖着写 */
8.4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
a:link	没有点击过的(访问过的)链接
​a:visited	点击过的(访问过的)链接
​a:hover	鼠标经过的那个链接
​a:active	鼠标正在按下还没有弹起鼠标的那个链接
8.5.链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素

/* 未访问的链接 a:link 把没有访问的链接选出来 */
a:link {
  color: #333;
  text-decoration: none;
}
/* a:visited 选择点击过的链接 */
a:visited {
  color: orange;
}
/* a:hover 选择鼠标经过的那个链接 */
a:hover {
  color: rgb(112, 187, 237);
}
/* a:active 选择的是我们鼠标正在按下还没有叹气鼠标的那个链接 */
a:active {
  color: green;
      }

实际在开发中的写法

/*a是标签名 所有的链接*/
a {
  color: gray;
}
/*:hover 鼠标经过变色*/
a:hover {
  color: red;       /*鼠标经过 由灰色变成红色*/
}
8.6.:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 类表单元素才能获取

input:focus {
  background-color: #a1dfe7;
  color: pink;
}

CSS第一弹先到这里吧，文章太长啦哈哈，持续更新中…

原文地址：https://blog.csdn.net/m0_62159662

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Css常用的排序方式权重分配
Css常用的排序方式权重分配 排序方式： 1、按类型&#160;如，显示和浮动、定位、尺寸、字体等 2、按字母&#160;按字母顺序排列，优点是规则简单 3、按定义长度&#160;按照样式定义的字符长度排列 各有优劣，实际应用中，推荐使用第一种。&#160;但是如果单靠前端工程师在编写过程中这么做的
用CSS实现一个抽奖转盘
原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上效果 基本是用CSS实现的，没有用图片，加一丢丢JS。不过没有考虑太多兼容性。 首先画一个 &lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;
css属性：word-wrap:break-word; 与 word-break:break-all 的用法；
css属性：word-wrap:break-word; 与 word-break:break-all 的用法； zhangq0123 于 2016-10-19 11:06:12 发布 6475 收藏 9分类专栏： CSS HTML 文章标签： html css版权 CSS同时被 2 个专栏收录8 篇
颜色插件网
https://destiny001.gitee.io/color/
jq动态插入数据和设置最后一个标签样式
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &l
css之background的cover和contain的缩放背景图
css之background的cover和contain的缩放背景图 对于这两个属性，官网是这样解释的： contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 等比例缩放图象到垂直或者水平其中一项填满区域。 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景
.CSS.MAP文件作用
.CSS.MAP文件作用 https://blog.csdn.net/qq_36441169/article/details/102575563 1、简介在写前端代码，使用bootstrap时，发现同一个目录下，不仅仅有.css文件的同时，还存在.css.map文件的存在。在前端页面调试时也发现，映
Jquery mobile 写html时文字太长无法自动换行
Jquery mobile 写html时文字太长无法自动换行。 Jquery mobile 1 篇文章0 订阅 订阅专栏 加上这个 style=&quot;word-wrap:break-word;word-break:break-all;&quot; 或者 style=&quot;word-wra
各种手册（layui手册、jq手册、css、js、ES6）
详见：http://www.shagua.wiki/project/3 layui图标：http://www.shagua.wiki/project/3?p=85 JQ手册 ：https://www.jc2182.com/jquery/jquery-jiaocheng.html css样式手册：ht
css里面圆形的代码,如何使用纯css实现圆形图像？（代码实例）
css里面圆形的代码,如何使用纯css实现圆形图像或叶子图像？（代码实例） 网易美学于&#160;2021-08-03 22:15:22&#160;发布946&#160;收藏 文章标签：&#160;css里面圆形的代码 有没有想过如何制作那些各式各样的圆形图像而无需用ps，本篇文章就来给你介绍一下如
css文字超出一行就显示省略号
css文字超出一行就显示省略号 1，css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2，css超出二行用点表示 overflow:hidden; text-overflow:ellipsis; disp
js动态追加数据单独设置某一个元素的样式
js动态追加数据单独设置某一个元素的样式。 在开发时，我们有很多数据是从后台获取然后展示的，例如列表，最近开发碰到个需求是获取到列表信息之后，不仅仅是拼接展示出来，还需要将其中的第一个li元素设置成其他的样式类，在网上找了一堆的办法都和自身业务需求不一致，没办法自己通过chrome控制台一点点调试，
css3手机端h5商品列表页，两列等分排列技巧
css3手机端h5商品列表页，两列等分排列技巧 .picture_list {&#x9;width: 100%;&#x9;overflow: hidden}.picture_list&gt;li {&#x9;width: 50%; min-height: 120px;&#x9;float: left;&#x9;padding: 0px 3
css3 transform:scale(x)实现字体的缩放：
css3 transform:scale(x)实现字体的缩放： css3 transform:scale(x)字体的缩放： transform:scale(x),针对于整体的缩放，缩放的整体包括宽，高，背景。这自然对于内联元素就无法使用此属性，最好使用无属性的span转换成块元素或者行内块元素进行设
jq获取第一个子元素并添加class
jq获取第一个子元素并添加class &lt;div class=&quot;main&quot;&gt; &lt;div class=&quot;tit&quot;&gt;颜色&lt;/div&gt; &lt;ul&gt; &lt;li&gt;银色&lt;/li&gt; &lt;li&gt;深灰色
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题 赵世婷&#160;2017-09-19 15:59:43 14372 收藏&#160;5 1 设置背景图片的两种方式： 方式一： .back{undefinedposition: fixed;width: 100%;height: 100%
css层级选择器理论（为优化尽量减少层级选择器）
css层级选择器理论{#ek) E:first-child : 匹配的是E元素，E元素是父元素的第一个子元素 说明：利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能
Css多行字符截取方法详解
Css多行字符截取方法详解 时间：2021-07-01 10:21:17 相信有很多同学在写前端页面的时候，都会遇到字符长了需要截取的问题，最简单的方法就是手动去截取，可这样又感觉太low了，今天晚上就来讲讲利用css进行字符的截取，不了解css是如何截取的同学可以和我们一起看看哦！ 前言 最近在做
css中content可以用到的字符编码
css中content可以用到的字符编码 项目中用到的一些特殊字符和图标 html代码 &lt;div class=&quot;cross&quot;&gt;&lt;/div&gt; css代码.cross{width: 20px;height: 20px;border-radius: 10px;b
CSS 计算属性 calc()的完整指南(上）
CSS 计算属性 calc()的完整指南(上） 2020-05-03 CSS tricks上有一系列的完整指南文章，我后面会翻译这些内容，更新不会一下子完成，而是会分成几个，防止自己因看到文章过长而放弃翻译，一步一个脚印。 CSS有一个特殊的calc()函数，用于做基本的数学运算。下面是一个例子：
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot