CSS样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40318250/article/details/99702314

html文件头部使用css

<html>
 <head>
  <title> New Document </title>
  <!--style  说明所要使用的标记 -->
  <!-- type="text/css"  说明这是一段css代码-->
 <style  type="text/css">
 h3{color:black;font-size:35px;font-family:黑体 }
 p{background:yellow;color:red;font-family:宋体}
 </style>
 </head>
 <body>
   <h3>在html文件的头部使用css</h3>
   <hr>
   <p>在html文件头部应用css(层叠样式表)</p>
 </body>
</html>

html的标记的内部使用css

基本语法：
  <html标记  style="样式的属性1:样式的属性1;样式的属性2:样式的属性2;......">
<html>
 <head>
  <title> New Document </title>
 </head>
 <body>
  <h1  style="color:red;font-size:50px;font-family:黑体">标签内部使用css</h1>
  <hr>
  <p style="background:cyan;color:red;font-family:宋体">在html标记的内部使用css</p>
 </body>
</html>

使用外部的css文件

基本语法：
   <head>
     <link rel="stylesheet"  type="text/css"  href="css样式表文件的存放位置">
      rel="stylesheet"   是指在html文件中使用的是外部样式表文件
      type="text/css"  指明该文件的类型是样式表文件
      href="css样式表文件的存放位置"    样式表文件的地址（绝对路径或相对路径）
   </head>
   
第一  编写外部css文件（后缀名【.css】）
h3{color:red; font-size:35px;font-family:黑体}
p{ background:yellow; color:red;font-family:宋体}

第二  <link rel="stylesheet"  type="text/css"  href="css样式表文件的存放位置">
<html>
 <head>
  <title> New Document </title>
  <link   rel="stylesheet"   type="text/css"  href="mycss.css">
 </head>

 <body>
   <h3>使用外部css</h3>
   <hr>
   <p>在html文件使用外部css(层叠样式表)</p>
 </body>
</html>

字体设置

1.font-family------设置字体
<html>
 <head>
  <title> New Document </title>
  <style  type="text/css">
   h2{ font-family:黑体 }
   p{ font-family:隶书,楷书,"Conrier New" }
  </style>
 </head>

 <body>
  <h2>设置字体</h2>
  <hr>
  <p>使用css来设置字体</p>
 </body>
</html>

font-size 设置字体大小

font-size:绝对尺寸/关键字/相对尺寸/百分比
 关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
<html>
 <head>
  <title> New Document </title>
  <style>
#p1{ font-size:30px}
#p2{ font-size:0.1cm}
#p3{ font-size:0.5mm}
.p1{ font-size:large}
.p2{font-size:small}
.p3{font-size:xx-small}
 </style>
 </head>

设置字体

font-style  设置字体的样式（设置字体是否为斜体字）
normal----正常显示字体
italic---斜体字
oblique--歪斜体（倾斜角度大一点）font-weight  设置字体的加粗
取值：
normal  ---- 正常显示
bold ----粗体（数字700粗细值）
bolder ---加粗
lighter ---细体（比正常字体稍微细一点）
number  ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）
text-shadow设置字体的阴影
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
text-shadow: 5px 5px 5px #FF0000;
font-variant 设置字体的变体
设置字体是否显示为小型的大写字母
主要用于设置英文字体
normal  --正常字体
small-caps  表示英文字母显示为小型的大写字母

颜色设置

1、color  
   关键字  英文单词来设置颜色“red”  红色
   RGB值  颜色码
2、设置背景颜色
   background-color
	 3、background-image
  	   设置背景图片

背景的设置和边框的设置

背景附件的设置
background-attachment
是指设置背景图片是否随着滚动条的移动而移动
scroll —表示背景图片随着滚动条的移动而移动
fixed—表示背景图片固定在页面上不动，不随滚动条移动而移动

设置背景图片的重复

background-repeat
设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
repeat 背景图片在水平和垂直方向平铺
repeat-x 背景图片在水平方向平铺
repeat-y 背景图片在垂直方向平铺
no-repeat 背景图片不平铺

背景图片的位置设置

background-position
关键字百分比位置说明
top left 0% 0% 左上位置
top center 50% 0% 靠上居中
top right 100% 0% 右上位置
left center 0% 50% 靠左居中
center center 50% 50% 正中位置
right center 100% 50% 靠右居中
bottom left 0% 100% 左下位置
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下位置

边框的设置

边框的样式
border-style
基本语法
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
取值：
none 没有边框
dotted 点线
dashed 虚线
solid 实线
double 双实线
groove 凹型线
ridge 凸型线
inset 嵌入式
outset 嵌出式
取同一个值：四条边框线是同一个线型
取两个值：上下边框使用第一个取值，左右边框使用第二个取值
取三个值：上边框取第一个值，左右取第二个值，下边框取第三个值
取4个值：上第一个值，右取第二个值，下取第三个值，左取第四个值

边框的属性设置和边距/填充

边框的宽度
border-width
基本语句：
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
取值；
thin ----细边框
medium —中等边框
thick–粗边框
长度—数字

边框的颜色

border-color

基本设置语法：
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color

取值
英文单词 “red”代表红色
RGB 颜色码

边框的综合设置和边距

border
边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离
上边距 margin-top
下边距 margin-bottom
左边距 margin-left
右边距 margin-right
复合设置 margin

取值：
数字----长度
百分比—是相对于上一级元素的百分比，允许是负数
auto —自动提取边框的值，默认值

边框的圆角

border-radius设置边框圆角

border-radius:50px;
先把边框设置后再设置圆角
div { border:2px solid; border-radius:25px; }

边框的阴影

box-shadow: 10px 10px 5px #888888;//添加阴影
X方向的偏移像素
Y方向的偏移像素
模糊的像素值
阴影颜色

填充

用来设置边框和其内部的元素之间的空白距离

上边距 padding-top
下边距 padding-bottom
左边距 padding-left
右边距 padding-right
复合设置 padding

取值：
数字—长度
百分比

css对文字的排版

调整字符间距
letter-spacing
用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。
取值：
normal —表示正常显示（默认）
长度–可以使用负数，带上单位
单位px(像素)

添加文字的修饰

为文字添加如下划线，删除线等修饰
text-decoration
属性的取值：
underline----添加下划线
overline—添加上划线
line-through–添加删除线
blink—添加闪烁效果（只能在Netscape的浏览器中正常显示）
none–没有任何的修饰

文本的对齐方式

text-align
用来控制文本的排列和对齐方式

属性的取值：
left–左对齐
right–右对齐
center–居中对齐
justify–两端对齐

段落的缩进设置

text-indent
用来控制每个段落的首行缩进的距离。
属性取值：
长度（数字）带上单位
百分比相对于上一级元素的宽度

行高设置

line-height
用来控制文本内容之间行间距
属性取值
normal—浏览器默认的行高
数字–设置行高带上单位
百分比----表示行高是该元素字体大小的百分比

放大缩小位移

Transform
transform:rotate(30deg);//旋转30度
transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素
transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

动画

Animation
格式：animation:myfirst 5s;（myfirst动画名，5s动画时间）
@keyframes myfirst
{ 0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;} }
@keyframes myfirst
{ from {background: red;}
to {background: yellow;}}

过渡动画

transition
格式：transition: width 2s; （应用于宽度，时间2秒）
div{transition:width 5s;
width:100px;height:100px;
background:red;}
div:hover { width:300px; } 先定义一个层的hover 鼠标进入后把宽度改为300px 则就会看到过渡动画