CSS基础总结

来源：互联网发布：从编程小白到全栈开发编辑：程序博客网时间：2024/06/05 19:19

CSS基础

一、初识CSS style=””
1.CSS是什么？
CSS 指层叠样式表 (Cascading Style Sheets)
2.CSS的作用 - 规定html元素样式
(1) 样式决定了如何显示页面元素
(2) 使用CSS可以达到页面内容与表现分离的效果
(3) CSS最重要的两点作用：【样式】【布局】
3.CSS的三种引用方式与优先级
(1) 内联样式
(2) 内部引用
(3) 外部引用

内联 > 内部 > 外部   就近原则

二、CSS选择器
1.标签选择器
*
div {}
p {}
div p {}
div > p {}

/* 全局选择 */ /* 选择器选择的越精确，优先级越高 */ * {     background-color: orange; }  /* 选择器 */ /* 标签选择器 */ section {     height: 150px;     background-color: red; }  /* 选中section标签的所有后辈img标签 */ section img {     height: 150px; } /* 选中section标签的所有img子标签 */ section > img {     height: 300px; }

2.属性选择器
(1) id选择器
(2) 类选择器 (一个标签可以有多个类名，以空格分隔)
(3) 属性选择器
1> h2[title ~= “hello”] // 选中含有title属性的h2标签，并且该标签的title属性值中必须有hello 如：

Hello World

注：属性选择器中h2和属性的值条件可以省略，表示全选 2> h2[title |= “hello”] // 表示title的值以连字符分割，且以hello开头 3> h2[title ^= “hello”] // 表示title的值以hello开头 4> h2[title $= “hello”] // 表示title的值以hello结尾 5> h2[title *= “hello”] // 表示title的值中包含hello
3.结构选择器
(1) :root // 页面根节点，即
(2) li:empty // 空节点选择
(3) li:not(.two) // 否定选择
(4) div:first-child（第一个） div:last-child（最后一个） div:nth-child(2（第二个）/even（偶数）/odd（奇数）) div:nth-last-child() //倒数
4.伪类选择器
(1) a:link 选择未被访问的链接，并设置其样式
a:visited 选择器对指向已访问页面的链接设置样式
a:hover 鼠标悬浮
a:active 选择器用于设置点击链接时的样式

// 针对于块级元素
(2) p:first-line(伪元素用于向文本的首行设置特殊样式仅限于块级元素)
p:first-letter( 伪元素用于向文本的首字母设置特殊样式)
p:before{content:…}（伪元素可以在元素的内容前面插入新内容）
p:after{content:…}（伪元素可以在元素的内容之后插入新内容）

三、常用属性与盒子模型【布局】
1.宽、高、边框（圆角）、内边距、外边距、背景颜色、背景图片
2.盒子模型【布局问题】

display
(1) display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
(2) display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
(3) display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

4.弹性盒子 display: flex
实现瀑布流效果【瀑布流小项目】

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #container {             display: flex;         }         .section1 {             flex: 1;         } .section2 {             flex: 1;         } .section3 {             flex: 1;         } img {             width: 100%;         } </style> </head> <body>  <div id="container"> <div class="section1"> <img src="../Resources/flex/1.jpg"> <p>范冰冰高雅吃饭，女神素颜也逆天！</p> </div> <div class="section2"> <img src="../Resources/flex/2.jpg"> <p>范冰冰高雅吃饭，女神素颜也逆天！</p> <img src="../Resources/flex/3.jpg"> <p>范冰冰高雅吃饭，女神素颜也逆天！</p> </div>     <div class="section3"> <img src="../Resources/flex/4.jpg"> <p>范冰冰高雅吃饭，女神素颜也逆天！</p> </div> </div>  </body> </html>

四、文本、字体与颜色
1. font-family:”Times New Roman”,Georgia,Serif;
2. font-size
3. font-weight
4. 换行模式与文本溢出处理

<style type="text/css"> div { width: 300px; height: 30px; /*溢出部分不显示*/         overflow: hidden; /*文本不换行*/         white-space: nowrap; /*文本显示不全，用省略号代替*/ text-overflow: ellipsis; font-size: 30px; font-weight: bold; } </style>

5.颜色
(1) 使用rob和透明度值 rgba(r, g, b, a)
(2) 使用色值 #000

五、定位 △
(1) relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
(2) absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
(3) fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
(4) float
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

六、过渡与动画
1. 过渡 transition & transform translate scale rotate
要实现这一点，必须规定两项内容：
· 规定您希望把效果添加到哪个 CSS 属性上
· 规定效果的时长

#trans { background-color: red; width: 300px; height: 100px; }  #trans:hover {     background-color: blue;     transition-property: background-color;     transition-duration: 2s;     transition-delay: 1s; }``` div{transition: width 2s;-moz-transition: width 2s;      /* Firefox 4 */-webkit-transition: width 2s;   /* Safari 和 Chrome */-o-transition: width 2s;            /* Opera */}【照片墙小工程】(1) position: relative; (2) z-index(3) box-shadow (左，下，虚化，颜色)(4) transition: all 0.5s;   //设置变换类型与时长(5) 旋转、缩放(6) 选择器与多类2. 动画 @keyframes(1) 创建一个简单的动画animation-timing-function：linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(m, n, x, y)(2) 常见的位移与旋转动画  【推广动画小项目】

           * {padding: 0; margin: 0;}  .section1 {  width: 100%;  height: 600px;  padding: 40px 0;  }  .section1 img:nth-child(1) {  animation: move-right 1s linear both;  float: left;  margin-left: 24%;  }  .section1 img:nth-child(2) {  animation: move-left 1s linear both;  float: right;  margin-right: 20%;  }   @keyframes move-right {  from {  margin-left: 0;  }  to {  margin-left: 24%;  }  }  @keyframes move-left {  from {  margin-right: 0;  }  to {  margin-right: 20%;  }  }   #section2 {  background: url(“../Resources/animations/bg_1.jpg”);  }  #section2>img {  animation: rotation 1s linear;  transform: scale(0.8);  margin-left: 10%;  }   @keyframes rotation {  0% {  transform: rotate(0deg) scale(0.2);  }  25% {  transform: rotate(180deg) scale(0.4);  }  50% {  transform: rotate(360deg) scale(0.5);  }  75% {  transform: rotate(540deg) scale(0.6);  }  100% {  transform: rotate(720deg) scale(0.8);  }  }       

   
“`

0 0