三种存在形式

行内 CSS

  1. <h1 style="color:blue;">A Blue Heading</h1>
  3. <p style="color:red;">A red paragraph.</p>

内部 CSS

一般在头部里面style的标签对里面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {background-color: powderblue;}
  6. h1   {color: blue;}
  7. p    {color: red;}
  8. </style>
  9. </head>
  10. <body>
  12. <h1>This is a heading</h1>
  13. <p>This is a paragraph.</p>
  15. </body>
  16. </html>

外部css

首先写一个单独的css文件，然后link到html文件里面就可以了

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <link rel="stylesheet" href="styles.css">
  5. </head>
  6. <body>
  8. <h1>This is a heading</h1>
  9. <p>This is a paragraph.</p>
  11. </body>
  12. </html>

选择器

class，id选择器

单个的不说了，看下这个

  1. p.center {
  2.   text-align: center;
  3.   color: red;
  4. }
  5. p#center {
  6.   text-align: center;
  7.   color: red;
  8. }

代表的意思是p标签下的对应的class,id

  1. <p class="center large">This paragraph refers to two classes.</p>

*选择器

这个代表选择所有标签

  1. *{
  2.   color: red;
  3. }

分组选择器

  1. h1, h2, p {
  2.   text-align: center;
  3.   color: red;
  4. }

意思就是你一次把几个相同的选择器可以写在一起，之间用逗号表示就可以了

后代选择器

  1. div p {
  2.   background-color: yellow;    //div  里面的p全选了
  3. }

子选择器

  1. div > p {
  2.   background-color: yellow;  //div的下一层的p,下2层的P不会选择，对只选自己的儿子
  3. }

相邻选择器

  1. div + p {
  2.   background-color: yellow;   //div后面的第一个P兄弟元素必须有相同的父元素，“相邻”的意思是“紧随其后”。
  3. }

兄弟姐妹选择器

  1. div ~ p {
  2.   background-color: yellow;  //div后面的所有的P
  3. }

背景

背景是一个非常常用的属性

background-color

  1. h1 {
  2.   background-color: green;
  3. }
  5. div {
  6.   background-color: lightblue;
  7. }
  9. p {
  10.   background-color: yellow;
  11. }

opacity

这是一个透明度属性，0-0.1 0就是完全透明了。
注意它可以将整个元素标签的所有内容全部隐藏

  1. p.one{
  2.     background-color: rgb(218, 240, 198);
  3.     border: solid 2px red;    
  4.     opacity: 0.8;
  5. }

当让你也可以用rgba来代替opactiy

image

背景图片

  1. p {
  2.   background-image: url("paper.gif");
  3. }

这是一个基本格式，默认的，图片不会有任何的拉伸，压缩，尺寸的变化，只会按照原来的尺寸填满你的元素

border

正规的写法顺序如下

  1. p.one{
  2.     display: inline;    
  3.     border-style: dotted solid double;
  4.     border-width: 5px;
  5.     border-color: blue;    
  6. }

当然如果4边的样式都是一样的化，我们可以直接一起写

  1. p {
  2.   border: 5px solid red;
  3. }

在写好整体之后，哪边要改的可以单独修改

  1. p.one{
  2.    border: solid 5px blue;
  3.    border-left: dotted 2px red;
  4. }

border-radius

  1. p.one {
  2.     width: 20px;
  3.     height: 20px;
  4.     border: solid 5px blue;
  5.     border-radius: 20px;
  6. }

当radius和宽高一样的时候就是一个⚪形了

盒子模型

所有 HTML 元素都可以被视为盒子。
image.png
一图就能看懂、当然你在浏览器的开发者工具中，也是能够看到的
image.png

width,height

默认的width=content 对的是不包括padding和border的
看个例子就知道了

  1. p.one {
  2.     width: 100px;
  3.     height: 100px;
  4.     padding: 10px;
  5.     border: solid 5px blue;
  6.     border-radius: 20px;    
  7. }

image.png
我们可以看到w和h就是content的内容
但是当我们加上

  1. box-sizing: border-box;

我们再看下
image.png
没错，现在的w和h就是包含border和padding了

margin,padding

  1. p {
  2.   margin-top: 100px;
  3.   margin-bottom: 100px;
  4.   margin-right: 150px;
  5.   margin-left: 80px;
  6. }
  7. div {
  8.   padding-top: 50px;
  9.   padding-right: 30px;
  10.   padding-bottom: 50px;
  11.   padding-left: 80px;
  12. }
  1. div {
  2.   padding: 25px 50px 75px 100px;
  3. }
  4. div {
  5.   padding: 25px 50px 75px;
  6. }
  7. div {
  8.   padding: 25px 50px;
  9. }
  10. div {
  11.   padding: 25px;
  12. }
  • 4个—上 右 下 左
  • 3个—上 左右 下
  • 2个—上下 左右
  • 1个—4边一样

    布局

    Flex Box

    这个是非常好用的布局，弹性布局，会根据屏幕的大小自动改变布局，特别适合现在多端的应用。

    父盒子

    ```html
    1111
    2222
    3333
  1. ```css
  2. .box{    
  3.     height: 50px;
  4.     width: 500px;
  5.     background-color: green;
  6.     margin: 2px;
  7. }
  8. .flx{  
  9.     /* 首先是外部盒子要flex */
  10.     display: flex;
  11.     /* 这个是盒子方向，一般就是默认的row就行了 */
  12.     flex-direction: row;
  13.     /* 这个属性是最关键的，默认不换行
  14.     如果缩小页面就会压缩子盒子的宽度，当然我们不想这样
  15.     所以改成换行，那么当宽度不够的时候就会自动换行了，
  16.     这样我们的元素宽度就永远不会变了
  17.     再小的屏幕也不会觉得元素小了。 */
  18.     flex-wrap: wrap;
  19.     /* 这是一个复合属性，是前2个的简写 */
  20.     flex-flow: row wrap;
  21.     /* 元素的对齐方式，一般默认就可以了 */   
  23. }

justify-content

这个属性单独拉出来讲下
就是元素的对齐方式，首先3个基本的

  1. justify-content: center;
  2. justify-content: end;
  3.     justify-content: start;
  1. justify-content: space-around;

这个是平均分配剩余空间
image.png

  1. justify-content: space-between;

这个是两边对齐，中间空出来，其实这个用的比较多，不然一边空出来太多会非常的丑
image.png

align-items

  2. /* 如果父容器有高度的话，子项目在纵轴上的排列 */
  3.     align-items:flex-center;

子盒子

order

是设定每个子元素拍在第几个，默认都是0，谁小谁排前面，可以负数

flex

三个属性的缩写
flex-grow flex-shrink flex-basis,要固定顺序
首先用这个属性的时候，那我们一边就不会设定子元素的width了，而且父元素nowarp。让他们自动的去分配空间。grow，是每个子元素自己占空间的几份。
flex-shrink指的是，当空间压缩的时候大家要缩小，它压缩的程度，默认值是1，越大就压缩的越厉害。
flex-basis是

align-self

当父容器有固定高度，子元素在纵轴上默认是拉伸的。它的值分别是start center end，分别在三个位置上。

outline

很简单就是border外面的一道线，写法和border一样，而且不会影响margin

text

文本是html5非常重要的一块

color and background-color

一个是字体颜色一个是背景颜色

Text Alignment

  • text-align
  • text-align-last

这两个属性是规定文本的对齐方式

  1. h1 {
  2.   text-align: center;
  3. }
  5. h2 {
  6.   text-align: left;
  7. }
  9. h3 {
  10.   text-align: right;
  11. }
  12. div {
  13.   text-align: justify;  **没看懂是干嘛的，
  14. }

  • text-align-last就是最后一行的对齐方式没啥说的

    Text Direction

    文字方向，感觉有点傻逼

    1. p {
    2. direction: rtl;
    3. unicode-bidi: bidi-override;
    4. }

    direction 和 unicode-bidi 属性可用于更改元素的文本方向：

    Text Decoration

    就是文字装饰
    只要是边线

  • text-decoration-line

  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

最后一个是一个简写，一般我们写简写

  1. text-decoration: red dotted underline 5px;

简写的时候没有顺序要求，有几个属性就写几个

  1. text-decoration:none;

=none的时候就是去掉所有的装饰

Text Transformation

  1. p.uppercase {
  2.   text-transform: uppercase;
  3. }
  5. p.lowercase {
  6.   text-transform: lowercase;
  7. }
  9. p.capitalize {
  10.   text-transform: capitalize;   //首字母大写
  11. }

font

我们一般直接用缩写就可以了，
The font property is a shorthand property for:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

font-size and font-family 是必须写的

  1. p.b {
  2.   font: italic small-caps bold 12px/30px Georgia, serif;
  3. }

link

The four links states are:

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked ```css

/ unvisited link / a:link { color: red; }

/ visited link / a:visited { color: green; }

/ mouse over link / a:hover { color: hotpink; }

/ selected link / a:active { color: blue; }

  1. 其实就是链接经过时的4个状态<br />在为多个链接状态设置样式时，有一些顺序规则： a:hover 必须在 a:link 和 a:visited 之后 a:active 必须在 a:hover 之后
  2. <a name="y5oAw"></a>
  3. # list
  4. <a name="fGaXB"></a>
  5. # table
  6. <a name="DinjX"></a>
  7. ## table border
  8. 表格默认是没有border的，需要自己写样式<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22734758/1653445871217-68f2ee3c-74b9-405b-84fa-894c8f6da5c2.png#clientId=ud3e95ffa-42e2-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=93&id=ue9fbe878&margin=%5Bobject%20Object%5D&name=image.png&originHeight=186&originWidth=378&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10080&status=done&style=none&taskId=u53715cbc-8260-4913-b560-ac6c465398d&title=&width=189)<br />border可以给table，th,tr加
  9. ```css
  10. table, th, td {
  11.   border: 1px solid;
  12. }

width

display

none就是不显示
默认是’’
可以换成block和inline
或者block-inline

positon

There are five different position values:

  • static
  • relative
  • fixed
  • absolute
  • sticky

然后使用 top、bottom、left 和 right 属性定位元素。但是，除非首先设置 position 属性，否则这些属性将不起作用。它们的工作方式也不同，具体取决于位置值。

static

positon的默认值，叫做静态定位
静态定位元素不受 top、bottom、left 和 right 属性的影响。
但是如果不加是没有这个属性的，所以想它拥有还是要写的
没啥讲的

relative

相对定位
这个相对是相对自己本身原来的位置
然后自己原来的位置还是在的。

fixed

具有位置的元素：固定；相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。 top、right、bottom 和 left 属性用于定位元素。
所以一旦fixed了，就失去了原来的位置占位了。
用这个做广告绝佳。

absolute

具有位置的元素：绝对；相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。
会失去原来的位置
也就是说父元素要有relative或者fixed

sticky


相对于当前父元素，当可以完全显示的时候，那么它就正常显示。
一旦滚动的时候要看不到它的时候，那么就执行fixed了。
点击查看【codepen】

Z-index

这是一个元素重叠的时候，看谁在上面图层的属性
首先如何能重叠，那肯定元素要失去当前的位置，所以几个重叠的元素肯定position:absoult,而且父元素position:relative

  1. <style>
  2.   .box{
  3.     position: relative;
  4.     width: 60%;
  5.     height: 100px;
  6.     left: 20%;
  7.     border: 1px solid green;
  8.   }
  9.   .lit{
  10.     position:absolute;
  11.   }
  12.   .lit1{
  13.     width: 100px;
  14.     height: 100px;
  15.     background-color: red;
  16.   }
  17.   .lit2{
  18.     width: 60px;
  19.     height: 60px;
  20.     background-color: yellow;
  21.   }
  22.   .lit3{
  23.     width: 30px;
  24.     height: 30px;
  25.     background-color: blue;
  26.   } 
  27. </style>
  28. <body>
  29.   <div class="box">
  30.     <div class="lit1 lit"></div>
  31.     <div class="lit2 lit"></div>
  32.     <div class="lit3 lit"></div>
  33.   </div>
  34. </body>

现在没有加index-x，我们可以看到都被第一个元素给覆盖了
image.png
现在我们让小的在上面，这样就都可以看到了，Z-index的值越大，就越在上面

  1. .lit1{
  2.   z-index: 1;
  3.   width: 100px;
  4.   height: 100px;
  5.   background-color: red;
  6. }
  7. .lit2{
  8.   z-index: 2;
  9.   width: 60px;
  10.   height: 60px;
  11.   background-color: yellow;
  12. }
  13. .lit3{            
  14.   z-index: 3;
  15.   width: 30px;
  16.   height: 30px;
  17.   background-color: blue;
  18.         }

image.png
这和ps的图层非常像的

overflow

是一个对超出盒子的内容的显示方式
The overflow property has the following values:

  • visible - Default. 溢出没有被剪裁。内容呈现在元素的框外
  • hidden -溢出被剪掉，其余内容将不可见
  • scroll - 溢出被剪裁，并添加滚动条以查看其余内容
  • auto - 与滚动类似，但仅在必要时添加滚动条

    overflow-x and overflow-y

    1. div {
    2. overflow-x: hidden; /* Hide horizontal scrollbar */
    3. overflow-y: scroll; /* Add vertical scrollbar */
    4. }
    就是对横纵分别的操作

    float