CSS基础篇1

叫我阿良v
210 阅读16分钟

CSS篇

一、语法规范

1. 语法规范：

  1. <head></head>标签中的<style></style>标签中间添加

  2. <link rel="stylesheet" href="地址"> 引入外部css文件

  3. <link rel="shortcut icon" href="../img/baidu.ico" type="image/x-icon">

    1. 网页导航栏小图标标志

2. Css代码风格：

  1. 紧凑格式：h3{color:deeppink;font-size:20px;}

  2. 展开格式：h3{

    Color:deeppink;

    Font-size:20px;

    }一般使用第二种 更直观

  3. 空格的使用：

    1. 属性值前 冒号后面 保留一个空格
    2. 选择器和大括号之间保留一个空格

二、Css 选择器

1. 基础选择器：

  1. 标签选择器：指用HTML标签名称作为选择器，按标签名称分类，为页面这某一类标签指定统一的css样式

  2. 类选择器：开发中最常用的

    1. 语法格式：

      1. .name {
    属性1 ： 属性值；
}
      2. 需要利用class调用
      3. 可以多类名使用，在一个class中放多个类名，类名之间用 空格 隔开

  3. id选择器：一个id只能使用一次

    1. 语法格式：

      1. #name {
 属性1 ： 属性值；
}
      2. 调用方法：<div id = ＂id名＂></div>

  4. 通配符选择器：不需要调用，自动给所有元素使用

    1. 语法格式：

      1. * {
    属性1 ： 属性值；
}

  5. !important 权重最高 尽量少用

  6. 相邻选择器：只能相邻一个，选择器之间用+相连

  7. 选择器权重：通配符 0 < 标签 1 < 类 10 < id 100 < 行内1000<!important 10000

2. 复合选择器：

1. 后代选择器：

  1. 语法格式：

    1. ul li {
    color:pink;
}
//默认继承关系
    2. 两个元素之间用空格隔开, 元素2需要是元素1的后代，元素1和元素2可以是任意基础选择器

2. 亲代选择器(子)：

  1. 语法格式：

    1. ul>li {
    color:pink;
}
//强制继承关系
    2. 只能选择作为某元素的最近一级子元素

3.并集选择器：

  1. 语法格式：

    1. div,
ul,
p {
    color:pink;
}
    2. 并集选择器是各个选择器通过英文逗号链接在一起，任何形式的选择器都可以（并集选择器喜欢竖着写）
    3. 可以选择多组标签，同时为定义相同的样式

3. 伪类选择器：

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

  2. 伪类选择器有很多，比如 链接伪类，结构伪类等

  3. 语法格式：

    1. div:hover {
    color : pink;
}

  4. 链接伪类选择器：

    1. div:link {} 选择所有未被访问的链接
    2. div:visited{} 选择所有已被访问的链接
    3. div:hover{} 选择鼠标指针位于其上的链接
    4. div:active{} 选择活动链接（鼠标按下未弹起的链接）

  5. Focus伪类选择器：用于选取获取焦点的表单元素

    1. 焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素

    2. 语法格式：

      1. input：focus {
    Background-color：pink；
}

#属性选择器

  1. 属性选择器可以根据 元素的特定属性来选择元素，这样就可以不用借助类或id选择器

  2. 语法格式：

    1. E[alt]：选择具有alt属性的E元素
    2. E[alt=＂val＂]：选择具有alt属性且属性值等于val的E元素
    3. E[alt^=＂val＂]：匹配具有alt属性且属性值以val开头的E元素
    4. E[alt$=＂val＂]：匹配具有alt属性且属性值以val结尾的E元素
    5. E[alt*=＂val＂]：匹配具有alt属性且属性值含有val的E元素

#结构伪类选择器

  1. 主要根据文档结构来选择元素，常用于根据父级，选择器里面的子元素

  2. 语法格式：

    1. E：first-child匹配父元素中的第一个子元素E

    2. E：last-child匹配父元素中最后一个子元素E

    3. E：nth-child（n）匹配父元素中的第n个子元素E

    4. E：first-of-type指定类型E的第一个

    5. E：last-of-type(1) 指定类型E最后一个

    6. E：nth-of-type（n）指定类型E的第n个

    7. nth-child（n）选择某个父元素的一个或多个特定的子元素

      1. n可以是数字，关键字或公式
      2. n如果是数字，就是选择第n个子元素
      3. n可以是关键字：even偶数，odd奇数
      4. n可以是公式

  3. 注意事项：

    1. 结构伪类选择器：一般是用于选择父级里面的第几个孩子
    2. nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后再看看是否匹配
    3. nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E再根据E找到第n个孩子
    4. 关于nth-child n是从0开始计算的，要记住常用的公式
    5. 无序列表，我们一般用nth-child更多
    6. 类选择器、属性选择器、伪类选择器 ，权重都是10

#伪元素选择器

  1. 伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

  2. 语法格式:

    1. ::before 在元素内部的前面插入内容
    2. ::after 在元素内部的后面插入内容

  3. Before和after 创建一个元素，但是属于行内元素

  4. 新创建的这个元素在文档中是找不到的，所以我们称为伪元素

  5. 语法：div::before{content = ＂＂ }

  6. Before和after必须有content属性

  7. 伪元素选择器和标签选择器一样，权重为1

  8. 可以应用于清除盒子浮动（清除的是影响）

三. Css字体属性

1.字体风格

  1. font-style：normal（默认的，标准字体）/ italic（显示斜体）/oblique (浏览器会显示一个倾斜的字体样式)

2.字体粗细

  1. font-weight：400 700等等....
  2. normal(默认的标准字体)/bold(粗体)/bolder(更粗)/lighter(更细)

3. 字体大小

  1. font-size:16px；（常用单位是px 谷歌默认16px）
  2. 给body设置可以指定整个页面的字体大小

4. 字体系列

  1. font-family：STHeiti;(华文黑体)

5. 字体显示

  1. normal(默认的标准字体)/small-caps(显示小型大写字母)

6.字体属性复合写法

  1. Font：font-style font-variant font-weight font-size/line-height(必须写) font-family
  2. 位置不可以变是恒定的，之间用空格隔开
  3. 不需要的可以省略，但是最后两个不可以省略

四. Css文本属性

1. 文本颜色

  1. Color：pink;
  2. inherit 规定应该从父元素继承颜色。 默认
  3. color_name 规定颜色值为颜色名称的颜色（比如 red）英文本义
  4. hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000）。
  5. rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）每个值的范围0-255。
  6. rgba(0-255,0-255,0-255,0-1) 前三个值的范围0-255 第四个值代表的透明度,0-1

2. 文本水平对齐方式

  1. text-align：left（左对齐）/ right（右对齐）/ center（居中对齐）

  2. justify 实现两端对齐效果(无效的) inherit 规定应该从父元素继承 text-align 属性的值。

  3. text-align-last 对齐元素中的文本 水平对齐方式

    justify 实现两端对齐效果（有效的）

3.文本修饰方式

  1. text-decoration：none（默认，无）/ underline（下划线）/ overline（上划线）/ line-through（删除线）

4. 文本缩进

  1. 定义文本第一行缩进：通常是将段落的首行缩进
  2. text-indent：2em；

5. 文本行高

  1. line-height：15px；

  2. 单行文字垂直居中的小技巧：

    1. 让文字的行高等于盒子的高度，即可让文字在当前盒子内垂直居中

6. 文本排列方式

  1. direction:inherit 规定应该从父元素继承 direction 属性的值。
  2. direction:ltr 默认。文本方向从左到右。
  3. direction:rtl 文本方向从右到左

7. 字间距

  1. letter-spacing:length定义字符间的固定空间（允许使用负值）。 单位 px 像素
  2. letter-spacing:normal默认。规定字符间没有额外的空间。
  3. letter-spacing:inherit规定应该从父元素继承 letter-spacing 属性的值。
  4. 设置文字符间距如果设置在单词里 会把每个字母当成一个汉字#

8. 单词间距

  1. word-spacing:length 定义单词间的固定空间。 单位 px
  2. word-spacing:normal 默认。定义单词间的标准空间。
  3. word-spacing:inherit规定应该从父元素继承 word-spacing 属性的值。
  4. 两个空格之间的文字为一个词#

9. 字母大小写

  1. text-transform 控制元素中的字母 大小写#
  2. none 默认。定义带有小写字母和大写字母的标准的文本。
  3. capitalize 文本中的每个单词以大写字母开头。 针对英文
  4. uppercase 定义全部显示大写字母
  5. lowercase 定义全部显示小写字母。

10. 空白处理方式

  1. white-space 设置元素中空白的处理方式#
  2. normal 默认。空白会被浏览器忽略。
  3. pre 空白会被浏览器保留。其行为方式类似 HTML 中的 
     标签。
  4. nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止 类似
  5. pre-wrap 保留空白符序列，但是正常地进行换行
  6. pre-line 合并空白符序列，但是保留换行符。
  7. inherit 规定应该从父元素继承 white-space 属性的值。

五. Css背景

1. 背景颜色

  1. Background-color： transparent（背景颜色透明）；

2. 背景图片

  1. background-image：url（图片地址）；
  2. 实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是便于控制位置-精灵图也是一种运用场景
  3. 页面元素既可以添加背景颜色也可以添加背景图片，不过图片会压住背景颜色

3. 背景平铺

  1. background-repeat：repeat（横向、纵向都平铺）/ no-repeat（不平铺）/ repeat-x（横向平铺）/ repeat-y（纵向平铺）/ 默认的是都平铺

4. 背景大小

  1. background-size ：指定图片大小
  2. contain ：背景成比例，按照最大边进行适配，图片完全显示在盒子里，少的部分出现白边
  3. cover ：背景图成比例，按照最小边进行适配，多余的裁切

5. 背景图片位置

  1. Background-position：x y；
  2. x，y可以使用方位名词或则精准单位（一般是px）
  3. Length：百分数、由浮点数字和单位标识组成的长度值
  4. Position：top center bottom left right 方位名词
  5. 如果指定的两个都是方位名词则前后顺序无关
  6. 如果只指定一个，则第二个默认是居中

6. 背景图像固定

  1. Background-attachment:（后期可以制作视差滚动的效果）

    1. Scroll：背景图像是随着对象内容滚动的
    2. Fixed：背景图像固定

7. 背景复合写法

  1. Background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

8. 背景图片半透明

  1. Background：rgba （0,0,0,0.3）；
  2. 前三个参数分别的红绿蓝,最后一个参数是aipha透明度，取值范围在0~1之间

六. Css元素显示模式

1. 元素分类

  1. HTML元素一般分为块元素或行内元素

  2. 注意：

    1. 文字类的元素内不能使用块级元素
    2. 行内元素只能容纳文本或其他行内元素
    3. 链接里面不能在放链接
    4. 特殊情况下链接中可以反复块级元素，但是给a转一下块级元素最安全

2. 行内块元素

  1. 他们同时具备块级元素和行内元素的特点

    1. 一行可以显示多个
    2. 可以控制高度、行高等之类的因素

3. 元素显示模式转换

  1. display：block(块级元素); inline(行内元素);inline-block(行内块元素)

七. Css盒子模型

#盒子模型

  1. box-sizing ：改变盒子模型
  2. box-sizing:content-box：标准盒子模型
  3. box-sizing:border-box：怪异盒子模型
  4. 标准盒模型：border+padding可以改变元素宽高的叫标准盒模型
  5. 怪异盒模型（ie盒模型）：border+padding改变不了元素宽高的叫怪异盒模型

1.边框

  1. 语法格式：

    1. border-width：定义边框粗细，单位px

    2. border-style：定义边框样式，none（无边框）

      1. solid：实线
      2. dashed：虚线
      3. dotted：点线

    3. border-color：定义边框颜色

  2. 复合写法（简写）：

    1. Border：1px soild pink；
    2. border-top：只设置上边框（bottom/下）（left/左）（right/右）

  3. 表格边框合并：

    1. border-collapse：collapse
    2. Collapse是合并的意思
    3. border-collapse：collapse；表示相邻边框合在一起

*圆角边框

  1. 语法格式：

    1. border-radius：length；
    2. Radius半径原理：（椭）圆与边框的交集形成的圆角效果
    3. 参数单位：可以是px也可以是百分比

  2. 圆角矩形：把数值设置为高度的一半

  3. 设置不同的圆角：

    1. border-radius：10px 10px 10px 10px； （从左上角顺时针）

2. 内边距

  1. 语法格式：

    1. Padding：12px；
    2. Padding-top：只设置上边框（bottom/下）（left/左）（right/右）

  2. 复合写法：

    1. Padding：（1个数据上下左右）（2个数据上下和左右）（3个数据上，左右，下）（4个数据上，右，下，左）；

3. 外边距

  1. 语法格式：

    1. Margin：12px;盒子和盒子之间的距离；
    2. Margin-top：只设置上边框（bottom/下）（left/左）（right/右）

  2. 复合写法：

    1. Margin：（1个数据上下左右）（2个数据上下和左右）（3个数据上，左右，下）（4个数据上，右，下，左）；

4. 嵌套块元素垂直外边距的塌陷问题

  1. 对于两个嵌套关系（父子关系）的块元素，父元素有上边距的同时子元素也有上边距，此时父元素会有塌陷较大的外边距值

  2. 解决方案：

    1. 可以为父元素定义上边框
    2. 可以为父元素定义上内边距
    3. 可以为父元素添加overflow：hidden

5. 清除内外边距

  1. 网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，布局时首先要清除网页元素的内外边距

  2. 行内元素为了照顾兼容性，尽量只设置左右内外边距，但是转换为块级元素和行内块元素就没有问题

  3. 语法格式： 一般是CSS的第一行代码)

    1. * {
    Padding：0；
    Margin：0；
}

6. 轮廓

  1. 轮廓：outline 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
#可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width  缺一
​
outline     在一个声明中设置所有的轮廓属性 
•outline:5px solid rgb(255, 0, 128);
•outline-color
•outline-style
•outline-width
•inherit 
​
outline-color  设置轮廓的颜色 
•color-name
•hex-number
•rgb-number
•invert
•inherit 
​
outline-style  设置轮廓的样式 
•none   默认。定义无轮廓。
•dotted  定义点状的轮廓。
•dashed  定义虚线轮廓。
•solid  定义实线轮廓。
•double  定义双线轮廓。双线的宽度等同于 outline-width 的值。
•groove  定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
•ridge  定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
•inset  定义 3D 凹边轮廓。此效果取决于 outline-color 值。
•outset  定义 3D 凸边轮廓。此效果取决于 outline-color 值。
•inherit 规定应该从父元素继承轮廓样式的设置。
outline-width  设置轮廓的宽度 thin
•medium
•thick
•length
•inherit
•outline通常用在input框上面（清楚默认点击样式）

八. Css阴影

1. 盒子阴影

  1. box-shadow：h-shadow v-shadow blur spread color inset；

    1. h-shadow：必须，水平阴影位置，允许负值
    2. v-shadow：必须，垂直阴影位置，允许负值
    3. Blur：可选，模糊距离
    4. Spread：可选，阴影的尺寸
    5. Color：可选，阴影的颜色
    6. Inset：可选，将外部阴影改为内部阴影

2. 文字阴影

  1. text-shadow：h-shadow v-shadow blur spread color inset；

    1. h-shadow：必须，水平阴影位置，允许负值
    2. v-shadow：必须，垂直阴影位置，允许负值
    3. Blur：可选，模糊距离
    4. Spread：可选，阴影的尺寸
    5. Color：可选，阴影的颜色
    6. Inset：可选，将外部阴影改为内部阴影

九. Css浮动

1. 网页布局方式

  1. 普通流（标准流）：就是标签按照规定好的默认方式排列

  2. 浮动： Float属性用于创建浮动框，将其移动到一边

  3. 定位：将盒子定位在浏览器某一个位置，css离不开定位

  4. 代码格式：

    div {
    float：none（不浮动）/ left（左浮动）/ right（右浮动）
}

2. 清除浮动影响

  1. Clear：both；（清除左右两边的浮动影响，新增的盒子必须是块级元素，不能是行内元素）（＂不确定＂子元素添加）

  2. 父级添加overflow属性,将其属性值设置为 hidden、auto、scroll

    1. 优点：代码简洁
    2. 缺点：无法显示溢出的部分

十. Css定位

1. 静态定位

  1. Position：static；
  2. 不脱标，很少使用

2. 相对定位

  1. Position：relative；
  2. 不脱标，相对自己定位

3. 绝对定位

  1. Position：absolute；
  2. 脱标，相对带有定位的父级进行定位（子绝父相）

4. 固定定位

  1. Position：fixed；
  2. 脱标，相对于浏览器可视区域定位

5. 粘性定位

  1. Position：sticky；
  2. 不脱标，相对浏览器可视区域定位

6. 隐藏和显示

  1. Display：none；隐藏
  2. Display：block；显示
  3. Visibility：visible默认是显示（不脱标显示）/ hidden（不显示）

7. 溢出处理

  1. Overflow：（文本超出边框时，文本的状态）

  2. 语法格式：

    1. Overflow：visible；（默认值，框外显示）
    2. Overflow：auto；（需要时添加滚动条）
    3. Overflow：hidden；（不显示）
    4. Overflow：scroll；（添加滚动条）

十一. 精灵图的使用

  1. .box { background:url(images/sprint.png) no-repeat -10px -25px; }
  2. 精灵技术主要是针对背景图的使用，就是把多个小背景图整合到一个大的背景图中
  3. 通过移动背景图片的位置来完成使用。此时可以用background-position
  4. 移动距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
  5. 向右向下移动是正，向左向上移动是负，一般来说都是负

十二. 字体图标

  1. 字体图标的优点：

    1. (1) 轻量级：可以较快的加载，减少服务器压力

      (2) 灵活性：本质是文字，可以随意改变

      (3) 兼容性：几乎所有浏览器都支持

      (4) 需要注意的是，字体图标不能取代精灵图，只是对工作的一种提升和优化

      (5) 总结：结构和样式简单的用字体图标，复杂的用精灵图（小图片）

  2. 字体图标的下载：

    1. Icomoon官网

    2. 阿里iconfont字库

  3. Ico引入流程：

    1. 第一步：下载好的压缩包解压后生成的文件夹，将其中的fonts放在要使用的文件根目录下，程序保存的地址同地址

    2. 第二步：css样式中全局声明字体

      1. Span{
font-family：’icomoon’
}

    3. (1) fonts相同的文件夹中有style.css文件，打开，从@font复制到block；}粘贴到<style>

      @font复制到block；}

      </style>

    4. fonts相同文件夹中有一个demo.html文件，打开

    5. (1) 复制想要用的图标下的右边的小框框，然后css中声明

      1. Span{
    font-family：’icomoon’;
    font-size: 100px;
    color:pink;
}
avatar
文章
阅读
粉丝