web基础【css】

css

Cascade style sheet
层叠样式表
CSS基本语法规则：选择器 + 若干属性声明

CSS独立的语言：声明式语言（和sql语言类似） 只声明结果，“我”想要什么，不管过程
针对哪些元素，给定那些样式，通过选择器（selector）

三种写CSS的方式：

1. 使用style标签，直接把CSS写道html文件中。【内部样式】
   此时的style标签可以放到任何位置，一般建议放在head标签里。

    <style>
        p {
      
      
            color: #f44f09;
            font-size: 30px;
        }
    </style>

2. 内联样式：使用style属性，针对指定元素设置样式，此时不需要写选择器，直接写属性键值对【内联样式】

    <p style="color: red;" >1111111111</p>   

3. 外部样式：把CSS代码单独作为一个.CSS文件，再通过link属性，让html引入该CSS文件【外部样式】。实际开发最常用。

<link rel="stylesheet" href="style.css">

CSS选择器

1. 标签选择器：在{ 前面写标签名字，此时意味着会选中当前页面中所有的指定标签。
2. 类选择器：更好的选择，可以创建CSS类，手动指定哪些元素应用这个类。
   CSS所谓的类，就是把一组CSS属性起了个名字，方便在别的地方引用。
   定义类，需要使用 . 开头，引用这个类的时候，通过class 属性=”类名"即可，不用带.

    <style>
        /* 定义了一个css类 */
        .one {
      
      
            color: red;
        }
        .two {
      
      
            color: green;
        }
        .three {
      
      
            color: blue;
        }
    </style>

    <div class="one">
        这是第 1 个div
    </div>
    <div class="two">
        这是第 2 个div
    </div>
    <div class="three">
        这是第 3 个div
    </div>

一个类，可以被一个元素引用，也可以被多个元素引用
一个元素可以引用一个类，也可以引用多个类。
理解层叠：一个元素，可以被应用多组样式，这些样式就好像一层一层叠加上去的

3. ID选择器
   HTML页面中的每个元素，都是可以设置成一个唯一的id的，作为元素的身份标识。
   给元素安排id之后，就可以通过id来选中对应的元素了。
   类选择器：可以让多个元素应用同一个类。
   id选择器：只能针对唯一的元素生效，因为一个页面里，只有唯一的id。

    <style>
        /* id选择器 */
        #oneDiv {
      
      
            color: red;
        }
    </style>

    <div id="oneDiv">
        这是第 1 个div
    </div>
    <div id="twoDiv">
        这是第 2 个div
    </div>

上述三个选择器，都属于简单的基础选择器。
除此之外，CSS还支持一些更复杂的 "复合选择器”。

复合选择器就是把前面的基础选择器组合。

4. 后代选择器
   把多个简单的基础选择器，组合一下。（可以是标签，类，id选择器的任意组合）
   这里li 只要是ul 的后代（子元素，孙子元素。。）即可，不一定要是子元素，

    <style>
     /* 先找页面中所有的ul，然后在这些ul里再找所有的li */
        ul li {
      
      
            color: red;
        }
    </style>

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

5. 子选择器
   把多个简单的基础选择器组合。（可以是标签，类，id选择器的任意组合）
   只找匹配的子元素，不找孙子元素之类的。子选择器的针对性更强。
   选择器1 > 选择器2 {
   属性…
   }
   只在选择器1 的子元素里找选择器2标签

    <style>
        .one> a {
      
      
            color: red;
        }
    </style>

    <div class="one">
        <a href="#">链接1</a>

        <p>
            <a href="#">链接2</a>
        </p>
    </div>

6. 并集选择器
   逗号分隔，既针对选择器1生效，又针对选择器2生效。多组选择器应用了同样的样式。
   选择器1,选择器2 {
   属性…
   }

    <style>
        .two,.three {
      
      
            font-size: 40px;
        }
    </style>

    <div class="one">
        <a href="#" class="two">链接1</a>

        <p>
            <a href="#" class="three">链接2</a>
        </p>
    </div> 

7. 伪类选择器
   复合选择器的特殊用法。
   前面的选择器是选中某个元素，伪类选择器是选中某个元素的某个特定状态。

:hover：鼠标悬停时候的状态
:active：鼠标按下时候的状态

<!-- 鼠标悬停时变为红色 -->
    <style>
        .one:hover {
      
      
            color: red;
            font-size: 40px;
        }
        
        .one:active {
      
      
            color: gold;
        }
    </style>

    <div class="one">
        这是第 1 个div
    </div>

快捷键技巧：
div ：生成<div></div>
div.one：生成 <div class="one"></div>
div#one：生成 <div id="one"></div>

HTML如何关联CSS

1. 内部样式，通过一个HTML标签：style

<style>.....css语法内容</style>

2. 外部样式：把CSS专门写在另外的资源（CSS文件）通过<link>标签引入
3. 内联样式：直接放在元素的style属性中，不需要跟选择器

CSS常用属性

表示具体的样式设置。
样式涵盖跟多方面的内容，包括但不限于：大小、位置、颜色、形状、边距、边框、特殊滤镜、过渡效果、动画等等。

字体属性

1. 设置字体家族 font-family，当前使用那种字体来显示。
   这个属性指定的字体，必须要求是系统已经安装了的。
   如果要指定一些特殊的字体，系统上没有的，则不能正确显示。
   这种情况一般需要通过浏览器请求对应的服务器，获取到指定字体文件，才能设置。

2. 设置字体大小font-size

3. 字体粗细 font-weight
   实际设置值的时候，有两种典型的设置风格

   • 使用单词
     • normal：正常粗细，与400等值
     • bold：加粗，与700等值
     • lighter：比从父元素继承来的值更细（处在字体可行的粗细值范围内）
     • bolder：比从父元素继承来的值更粗（处在字体可行的粗细值范围内）
   • 使用数字
     1-1000之间的值

4. 文字倾斜 font-style
   i 和em是HTML中的让文字倾斜的标签，这俩标签实际上没啥用，直接通过CSS设置。
   一个div，搭配CSS，就可以实现前面各种标签的效果（个别表单标签input实现不了）
   html很多功能相当于被CSS给架空了。

font-style:italic;   /* 设置倾斜 */
font-style:normal;   /* 取消倾斜 */

5. 文字颜色 color
   计算机表示颜色：使用RGB表示方法。
   前端中，给RGB各分配一个字节，每个字节的范围0 ~ 255 / 00 ~ FF。

6. 文本对齐 text-align
   text-align:left 默认左对齐
   text-align:right 右对齐
   text-align:center 居中对齐

7. 文本装饰 text-decoration

• underline：下划线
• none：什么都没有，可以给a标签去掉下划线
• overline：上划线
• line-through：删除线

8. 文本缩进 text-indent
   首行缩进两个文字

text-indent: 2em;

px：相当于是绝对的量
em：相对的量，以文字尺寸为基础进行设置。 【常用】
文本缩进的值可以是负数（向左缩进）

9. 行高
   行高 = 文字高度 + 行间距
   行高：两个顶线之间的距离
   

10. 背景颜色 background-color

11. 背景图片 background-image
    background-image: url(图片路径)
    引入背景图片后，默认图片是平铺的，如果不想平铺，使用background-repeat:none
    禁止平铺后，图片会出现在左上角
    如果我们想让图片居中：background-position:center center;
    top center bottom 上 中 下； left center right 左 中 右
    除了单词，还可以使用像素坐标控制：background-position:10px 50px;
    计算机常用
    

12. 设置背景图尺寸 background-size
    在background系列属性的加持下，div (任何一个元素)都可以用来显示图片，而且提供的功能比img标签更强大

• contain 让这张图尽可能大，不破坏原有图片比例
• cover 让这张图伸展到整个div，破环原有图片比例

13. 圆角矩形 border-radius
    html元素默认都是一个个的矩形，有时我们需要表示"带有圆角"的矩形：

border-radius:10px

含义：给矩形的内部画一个内切圆，构成圆角。
border-radius设置的是内切圆的半径，半径越小，内切圆越不明显

元素的显示模式display

display:block; 块级元素
display:inline; 行内元素
任何一个html标签的显示模式（块级/行内）都是可以设置的

关于块级元素和行内元素的区别（前端经典面试题）

1. 块级元素会独占一行，行内元素不独占一行
2. 块级元素的高度、宽度、内外边距都可以设置；而行内元素的高度、宽度、行高无效，内边距有效，外边距有时有效有时无效。
3. 块级元素默认宽度和父元素一样宽，行内元素默认宽度和里面内容一样宽。
   【块级元素比较正常，行内元素的特殊情况很多，一般如果需要，都先把行内元素转成块级元素】

CSS 盒子模型

任何一个html元素，都是一个矩形的盒子，盒子里面可以放内容（可以是文本、其他元素）

描述了html元素基本的布局规则

每一个块级元素，都由这里面的几个元素构成

• content：内容
• padding：内边距
• border：边框
• margin：外边距

border属性：边框，直接设置了4个方向
还可以使用：border-left、border-right、border-top、border-bottom
设置边框要设置的三个方面：

1. 边框的粗细
2. 边框的颜色
3. 边框的风格（实线solid、虚线dashed…）

border: 5px black solid;

边框默认情况下会撑大盒子。
通常我们不希望撑大盒子，因为这可能会影响该元素和其他元素的相对位置。
使用专门的属性防止盒子被撑大：box-sizing: border-box;

padding属性：内边距，内容和边框的距离
padding: 10px；表示四个方向都是10px边距
padding: 10px 20px；上下边距是 10px， 左右边距是20px
padding: 10px 20px 30px 40px； 上右下左（顺时针）

margin属性：外边距，设置两个相邻元素之间的距离
margin和padding类似，分四个方向设置
margin: 10px；表示四个方向都是10px边距
margin: 10px 20px；上下边距是 10px， 左右边距是20px
margin: 10px 20px 30px 40px； 上右下左（顺时针）

margin的特殊用法：把margin-left 和margin-right 都设置为auto，让浏览器自动调节，此时该元素就能够在父元素内部居中放置。而margin-top和margin-bottom无法实现水平居中

通过border、padding、margin三个属性，就可以控制元素之间，元素和内容之间的相对位置。

弹性布局

用来实现页面布局的：控制某个指定元素放到指定位置上。

html的页面布局是一个麻烦的事，最初html就没有考虑“布局”的事情

1. 基于表格的布局。【原始方式，被淘汰了】
2. 基于浮动的布局方法。主要解决 “水平方向排列” 的问题。【块级元素默认就是垂直方向排列的(独占一行)】
3. 弹性布局。解决 “水平方向排列” 的问题。更简单，功能多。
4. 网格布局。二维的布局，更高级版本的“表格布局”。诞生时间还不够长，市面上还存在不支持网格布局的老浏览器。

行内元素虽然是在水平方向上排列的，但是不适合进行水平布局，因为尺寸边界都不可控。
而行内块元素虽然可以设置尺寸和边距，但是默认不独占一行。
行内块元素和行内元素都会把源码中的换行当作一个空格，堆页面元素布局产生不好的影响
因此我们更倾向于使用弹性布局。

1. 开启弹性布局

display: flex;

给要水平排列的元素的父元素设置flex。
此时，弹性容器里的元素，不再是“块级” “行内元素” ，而成为了 “弹性元素” ，是遵守弹性布局的，可以设置尺寸和边距。

2. 设置这些元素的水平方向的排列方式

justify-content: flex-start;  /* 靠左 */
justify-content: flex-end;   /* 靠右 */
justify-content: center;     /* 居中 */
justify-content: space-around;    /* 元素两边等间距 */
justify-content: space-between;   /* 元素与元素中间等间距空白 */

3. 设置这些元素的垂直方向的排列方式

align-items: flex-start;   /* 靠上 */
align-items: flex-end;     /* 靠下 */
align-items: center;       /* 居中 */