CSS基础

简介

什么是CSS?

  • CSS(Cascading Style Sheets)层叠样式表。
  • CSS是一种用于Web的标准布局语言。
  • 样式定义如何显示HTML元素,样式通常存储在样式表中。
  • CSS语法分为两个部分:选择器,一条或多条声明。
    1. 选择器:通常是需要改变样式的HTML元素
    2. 声明:由一个属性:一个值成对组成
    3. 格式:
          selector{
      property1:value1; //每一行只写一个属性,是为了增强CSS可读性
      property2:value2;
      ...
      }

CSS如何创建?

插入样式表的方法有三种:外部样式表,内部样式表,内联样式。

外部样式表(理想):可通过改变一个文件来改变整个站点的外观,每个页面使用link标签来链接样式表。

格式:

    <head>
   <link href="My.css" rel="stylesheet" type="text/css">//浏览器会从文件My.css读到样式声明。样式表以.css扩展名保存,不包括任何HTML标签。
</head>

内部样式表:单个文档需要特殊的样式时使用。每个页面使用style标签来编写样式表。

格式:

    <head>
   <style type="text/css">
   ...//此处编写样式
   </style>
</head>

内联样式(慎用):在相关的标签内使用style标签。

选择器

基本选择器:

1.通用选择器

*定义页面所有元素的样式。

格式:*{样式;}

2.标签选择器

也称元素选择器,是最常见的 CSS 选择器。选择器通常是某个 HTML 元素。

格式:HTML元素{样式;}

3.类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

格式:.类名{样式;} (类名不能以数字开头,区分大小写)

HTML中引用:class=“类名”

4.ID选择器

ID选择器可以为标有特定ID的HTML元素制定特定的样式。id属性在每个HTML文档中只出现一次。

格式:#ID名{样式;} (ID名不能以数字开头)

HTML中引用:id=“ID名”

5.属性选择器

为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

格式:[HTML元素]{样式;}

例:
  1. *[title] {color:red;} //title元素变为红色
  2. a[href] {color:red;} //只对href属性的a元素应用样式
  3. a[href] [title] {color:red;} //同时有href和title属性的超链接的文本应用样式
  4. img[alt] {border:5px solid red:} //对所有alt属性的图像应用样式

组合选择器:

后代选择器

后代选择器又称为包含选择器,可以选择作为某元素后代的元素。匹配所有标签1嵌套的标签2.

格式:CSS中  标签1 标签2 {样式;}
   HTML中

        <标签1>
<标签2> 应用样式 </标签2>
</标签1>

在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。

子选择器

子元素选择器只能选择作为某元素子元素的元素。匹配标签1里嵌套的子标签2。

格式:选择器1>选择器2 {样式;}

例:
  1. h1>strong {color:red;} //选择只作为h1元素子元素的strong元素
  2. table.company td>p //选择作为td元素子元素的所有p元素,td元素从table元素继承,该table元素有一个包含company的class属性

相邻元素选择器

相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。选择紧接在选择器1元素后的选择器2。

格式:选择器1+选择器2 {样式;}

伪类选择器

用于向某些选择器添加特殊的效果。

格式:selector:pseudo-class {property:value;}

CSS样式

1.背景属性

CSS允许应用纯色作为背景,也可用背景图像创建相当复杂的效果。

  background-color 背景色
  background-image 背景图像

  • url("图像位置");1.路径中同级别:直接写文件名 2.上级别:../文件名(上几级别就有几个../) 3.下级别:目录名/文件名(常用,需单键文件夹img存放)
  • linear-gradient(颜色);颜色渐变效果
  background-repeat 背景重复

  • no-repeat; 常用,设置图像不重复
  • round; 自动缩放直到适应并填充满整个容器
  • space; 以想通过的间距平铺且填充满整个容器
  background-position 背景定位
  1. 值为关键字或百分数值或长度值(单位为像素px)
  2. 如:background-position: center; 图像居中,x轴y轴都居中
  background-attachment 背景关联,背景图像是否固定或者随页面其余部分滚动

2.文本属性

  text-indent 缩进文本
  1. 使用正值:p{text-indent: 5em;}所有段落的首行缩进5em
  2. 使用负值:
    p{
    text-indent: -5em;
    padding-left: 5em; 避免首行的文本超出窗口的左边界
    }
  3. 使用百分比值:
    div{width:500px;}
    p{text-indent: 20%;}缩进值是父元素的20%
  4. 继承:
    css中
    div #outer {width:500px;}
    div #inner {text-indent:10%;}
    p{width:200px;}
    html中
    <div id="outer">
    <div id="inner">some text.some text.
    <p>this is a paragraph </p> 段落继承了id为inner的div元素缩进值。
    </div>
    </div>
  text-align 水平对齐
  word-spacing 字间隔,值为正/负,字间隔增加/减小
  letter-spacing 字母间隔,值为正/负,字间隔增加/减小
  text-transform 字符转换

  • capitalize 文本中的每个单词以大写字母开头。
  • uppercase 定义仅有大写字母。
  • lowercase 定义仅有小写字母。
  text-decoration 文本装饰

  • underline 下划线
  • overline 上划线
  • line-through 中间贯穿线
  • blink 文本闪烁
  white-space 处理空格

  • normal 默认处理方式。
  • pre 保留空格,当文字超出边界时不换行
  • nowrap 不保留空格,强制在同一行内显示所有文本,直到文本结束或者碰到br标签
  • pre-wrap 保留空格,当文字碰到边界时换行
  • pre-line 不保留空格,保留文字的换行,当文字碰到边界时换行
  direction 文本方向,仅当unicode-bide:embed;/:bidi-override;时使用
  vertical-align 文本所在行高的垂直对齐方式

  • baseline 默认
  • sub 垂直对齐文本的下标,和<sub>标签一样的效果
  • super 垂直对齐文本的上标,和<sup>标签一样的效果
  • top 对象的顶端与所在容器的顶端对齐
  • text-top 对象的顶端与所在行文字顶端对齐
  • middle 元素对象基于基线垂直对齐
  • bottom 对象的底端与所在行的文字底部对齐
  • text-bottom 对象的底端与所在行文字的底端对齐

3.字体属性

  font-family 指定字体系列
  1. 值可用字体1,字体2;来备用
  2. 字体单词不止一个,用‘’隔开
  font-style 字体风格

  • normal 字体正常显示
  • italic 文本斜体显示
  • oblique 文本倾斜显示
  font-variant 字体变形,设置不同大小的大写字母
  font-weight 字体加粗

  • normal 默认
  • bold 加粗
  • bolder 相当于<strong>和<b>标签
  • lighter 常规
  • 100~900 整百,最细~最粗,400=normal,700=bold
  font-size 字体大小

  • medium 默认,大小是16px=1em
  • <absolute-size>可选参数值:xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
  • <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值:smaller、 larger
  • <percentage>百分比指定文字大小
  • <length>用长度值指定文字大小,不允许负值

4.链接属性

链接的四种状态
  1. a:link{样式;} 普通未被访问的链接
  2. a:visited{样式;} 已被访问的链接
  3. a:hover{样式;} 鼠标停留链接时
  4. a:active{样式;} 链接被点击
次序位置a,b>c>d
text-decoration 文本修饰,值为none时,大多用于去掉链接中的下划线
background-color 背景颜色

5.列表属性

此属性允许放置、改变列表项标志或将图像作为列表项标志

list-style-type 列表类型

  • none 去除标志
  • decimal-leading-zero; 02
  • square; 方框
  • circle; 空心圆
  • upper-alph; & disc; 实心圆
list-style-image:url(XXX.gif) 列表项图像
list-style-position 列表标志位置
list-style 列表样式

6.表格属性

表格边框 border  
折叠边框 border-collapse 设置是否将表格边框折叠为单一边框
表格宽度 width  
表格高度 height  
表格文本对齐 text-align 水平对齐方式
  vertical-align 垂直对齐方式
表格内边距 padding  
表格颜色 border 边框颜色
  background-color 背景颜色
  color 文本颜色

页面布局

1.边框

  border-style:边框样式

  • solid 默认,实线
  • double 双线
  • dotted 点状线条
  • dashed 虚线

 border-color:边框颜色

border-width:边框宽度

  border-radius:圆角

  • 1个参数:四个角都应用
  • 2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
  • 3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
  • 4个参数:左上、右上、右下、左下(顺时针)

  border: 简写

  • border: 2px yellow solid;

box-shadow:边框阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • box-shadow: 10px 10px 5px #888;

2.盒子模型

padding:用于控制内容与边框之间的距离;

    margin: 用于控制元素与元素之间的距离;

padding、margin 表示上右下左都应用
padding-top、margin-top
padding-right、margin-right
padding-bottom、margin-bottom
padding-left、margin-left

一个参数,应用于四边。

两个参数,第一个用于上、下,第二个用于左、右。

三个参数,第一个用于上,第二个用于左、右,第三个用于下。

3.display

  • none 不显示。
  • block 显示为块级元素。
  • inline 显示为内联元素。
  • inline-block 行内块元素(会保持块元素的高宽)。
  • list-item 显示为列表元素。

4.visibility

  • visible 元素可见
  • hidden 元素不可见
  • collapse 当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。

5.float 浮动

让一行显示两个块级标签,会脱离文档流

  • none
  • left 左浮动
  • right 右浮动

clear 清除浮动:

  • none  :  默认值。允许两边都可以有浮动对象
  • left   :  不允许左边有浮动对象
  • right  :  不允许右边有浮动对象
  • both  :  不允许两边有浮动对象

6.clip 剪裁图像

rect 剪裁定位元素:

  • auto 默认值,无剪切
  • 上-右-下-左(顺时针)的顺序提供四个偏移值
  • 区域外的部分是透明的
  • 必须指定 position:absolute;
  • 例:clip:rect(0px,60px,200px,0px);

7.overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

  • visible 默认值,内容不会被修剪,会呈现在元素框之外。
  • hidden 内容会被修剪,并且其余内容是不可见的。
  • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

8.position 规定元素的定位类型

static 默认值,没有定位
fixed 固定定位元素。元素相对浏览器固定,即窗口滚动它也不会滚动,定位的元素和其他元素重叠
relative 相对定位元素。相对于其正常位置偏移,常用来做绝对定位元素的容器块
absolute 绝对定位元素。脱离正常文档流,可覆盖页面上其他元素

通过以下四种属性进行定位:

  • left
  • top
  • right
  • bottom
  • z-index

9.z-index 元素层叠顺序

  • z-index 仅在定位元素上有效(例:position:absolute;)
  • 可以指定负数属性值(例:-1;)优先级低。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: greenyellow;
position: absolute;
top: 20px;
left: 30px;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
<p>默认的z-index是0.z-index -1拥有更低的优先级</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: greenyellow;
position: absolute;
top: 20px;
left: 30px;
z-index: 1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
top: 50px;
left: 50px;
z-index: -1;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
<p>默认的z-index是0.z-index 1拥有更高的优先级</p>
</body>
</html>

10.outline 边框轮廓

  • outline-width 轮廓宽度
  • outline-color 轮廓颜色
  • outline-style 轮廓样式

11.zoom 缩放比例

  • normal 使用对象的实际尺寸
  • <number> 用浮点数定义缩放比例,不可为负值
  • <percentage> 用百分比定义缩放比例,不可为负值

12.cursor 鼠标的类型形状

url

需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

13.transform、transition 动画效果

transform 转换,变形

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew。

  • origin 定义旋转基点(left top center right bottom 坐标值)    transform-origin: 50px 50px; transform-origin: left;。
  • rotate 旋转            transform:rotate(50deg) 旋转角度可以为负数,需要先定义origin。
  • scale  缩放             transform:scale(2,3) 横向放大2倍,纵向放大3倍;transform:scale(2) 横竖都放大2倍。
  • translate 移动        transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。
  • skew  倾斜             transform:skew(50deg,50deg)  分别为相对x轴倾斜,相对y轴倾斜。
  2D 3D X轴 Y轴 Z轴
rotate rotate(angle) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle)
scale scale(x,y) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z)
translate translate(x,y) translate3d(x,y,z) translateX(x) translateY(y) translateZ(z)
skew skew(x-angle,y-angle)   skewX(angle) skewY(angle)  

transition 平滑过渡

  • transition-property:           变换的属性(none(没有属性改变)、all(所有属性改变)、具体属性)
  • transition-duration:           变换持续时间,单位为秒或毫秒
  • transition-timing-function: 变换的速率(ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线))
  • transition-delay:               变换延迟时间
  • transition:                        缩写

CSS学习总结的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  6. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  7. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  8. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. 201521123121 《Java程序设计》第1周学习总结

    1. 本周学习总结 我们将要重点接触的JAVA SE主要分为4个部分:JVM.JRE.JDK.java语言. 其中JVM作为运行虚拟机隶属于JRE运行环境中,是JAVA通用性.跨平台适应性高的基础保证 ...

  2. Java课程设计——计算数学表达式的程序(201521123051 谢庆圆)

    计算数学表达式的程序(201521123051 谢庆圆) 1.团队课程设计博客链接 团队课程设计博客链接 2.个人负责模块或任务说明 1.计算数字表达式中操作按钮的实现(右容器) 2.. 注册监听器以 ...

  3. MarkDown 例子

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  4. 纳税服务系统【用户模块之使用POI导入excel、导出excel】

    前言 再次回到我们的用户模块上,我们发现还有两个功能没有完成: 对于将网页中的数据导入或导出到excel文件中,我们是完全没有学习过的.但是呢,在Java中操作excel是相对常用的,因此也有组件供我 ...

  5. 详解go语言的array和slice 【二】

    上一篇已经讲解过,array和slice的一些基本用法,使用array和slice时需要注意的地方,特别是slice需要注意的地方比较多.上一篇的最后讲解到创建新的slice时使用第三个索引来限制sl ...

  6. iOS 信号量

      信号量就是一个资源计数器,对信号量有两个操作来达到互斥,分别是P和V操作. 一般情况是这样进行临界访问或互斥访问的: 设信号量值为1, 当一个进程1运行是,使用资源,进行P操作,即对信号量值减1, ...

  7. RobotFramework自动化测试框架-移动手机自动化测试Clear Text关键字的使用

    Clear Text关键字用来清除输入框的数据,该关键字接收一个参数[ locator ],这里的locator指的就是界面元素的定位方式. 示例1:Clear Text清除输入框数据时,采用reso ...

  8. 启动PHPstudy提醒80、3306端口被占用

    端口占用会出现如下提醒 解决办法: 进入dos窗口:快捷键win+R,然后输入cmd 在dos窗口中输入命令:netstat   -ano(查找各端口所在进程的PID) 找到80和3306的程序PID ...

  9. 通用技术 : 异步调用 - Ajax技术

    Ajax技术概述

  10. 内核对象 windows操作系统

    问题: 什么是内核对象? 答:内核对象实际上时由内核分配的一块内存,而且只能由内核来访问.它时一个数据结构,成员包含有关于该对象的信息.一些成员对于所有对象类型都是一样的,比如对象名称.安全描述.使用 ...