css学习笔记

CSS: 层叠样式表

CSS作用: 美化页面,提高代码的复用性

​1. 选择器:
需要掌握的:
元素选择器: 标签的名称

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

类选择器: 以 . 开头

以 . 开头
.类的名称{
   属性名称:属性的值;
    属性名称:属性的值;
}

ID选择器: 以#开头, #ID的名称 ID必须是唯一的

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

优先级: 按照选择精确度: 行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则
扩展选择器:
选择器分组: 选择器1,选择器2 以逗号隔开
后代选择器: 爷爷 孙子 中间以空格隔开
子元素选择器: 爸爸 > 儿子
属性选择器: 选择器[属性的名称=”]
伪类选择器: 超链接标签上使用

CSS的引入方式:
外部样式: 通过link标签引入一个外部的css文件

<link rel="stylesheet" href="style1.css" />

内部样式: 直接在style标签内编写CSS代码
行内样式: 直接在标签中添加一个style属性, 编写CSS样式

2.浮动:
float : left, right 不再占有正常文档流中的空间 , 流式布局
清除浮动: clear: both left right
​3. 盒子模型: 顺时针 : 上右下左
padding : 内边距 ,控制的是盒子内容的距离
margin : 外边距 控制盒子与盒子之间的距离
padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
绝对定位:
position: absolute
top:控制距离顶部的位置
left:控制距离左边的位置

例:类选择器


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        
        <style>
            .shuiguo{
                color: yellow;
            }
            .shucai{
                color: green;
            }
        style>
    head>
    <body>
        
        <div class="shuiguo">香蕉div>
        <div class="shucai">黄瓜div>
        <div class="shuiguo">苹果div>
        <div class="shucai">茄子div>
        <div class="shuiguo">橘子div>
    body>
html>

你可能感兴趣的:(学习笔记)