CSS基础一则（1）

css

美化页面

书写类型

  • 行内式： 只作用当前元素，对其他元素无效果
    <p style="color: red;">文本内容</p>
  • 内嵌式： 只作用当前html页面，可对当前页面元素复用
    /* 写在head标签里 */
    <style>
        p {
            color: red;
        }
    </style>
  • 外联式： 可对整个项目复用
/* 在head标签下引入，index.css为外部样式表 */
<link rel="stylesheet" type="text/css" href="index.css">

语法结构

选择器 {属性： 值; 属性： 值; ...} // 用分号

常用样式属性设置

完整属性推荐看w3school： https://www.w3school.com.cn/css/css_list.asp

div {
    width: 100px; // 宽
    height: 100px; // 高
    line-height: 100px; // 行高
    background-color: #fff; // 背景色设置
    background-image: url(); // 背景图片
    background-size: 100% 100%; // 背景图片大小
    text-align: center; // 文字居中显示 left， right
    font-size: 16px; // 字体大小
    font-family: 微软雅黑; // 字体
    font-style: normal; //italic 斜体
    font-weight: bold; //加粗，默认 normal
    color: #000; // 文字颜色
    opacity: 0.4; //透明度
    margin: 10px 20px; //外间距 margin-top/margi-bottom/margin-left/margin-right
    padding: 10px; //内边距 也可设置四个方向，同margin
    float: left; //浮动
    visibility： none; //可见
    position: relative | absolute | fixed; //定位
    left: 20px; // 同position配合使用
    bottom: 10px; // 同上
}

选择器

  • 标签选择器： 标签名 {}
  • 类选择器： .类名 {}
  • ID选择器: #ID名 {}
  • 通配符选择器： * {} 对页面所有元素起作用
  • 后代选择器： 父元素 子元素 {}
  • 并集选择器： 元素1, 元素2 {} 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       // 标签选择器
        p {
            color: red;
            font-size: 16px;
        }
        // 类选择器
        .p1 {
            color: blue;
            font-size: 16px;
        }
        // ID选择器
        #p1 {
            color: blue;
            font-size: 16px;
        }
        // 通配符选择器
        * {
            color: #fff;
        }
        // 后代选择器，对div下的p标签起作用
        div p {
            color: #fff;
        }
        // 对类名为p1和类名为p2的起作用
        .p1, .p2 {
            color: #fff;
        }
    </style>
</head>
<body>
  <div>
    <p>我是标签选择器</p>
    <p class="p1">我是类选择器</p>
    <p class="p2">我是类选择器</p>
    <p id="p1">我是ID选择器</p>
  </div>
</body>
</html>

伪类

a:link {
    ...
}
a:hover {
    //常用
}
a:visited {}
a:active {}
input:focus {}

标签分类

  • 块级元素： div p ul li h
    • 独占一行
    • 默认有宽度，默认宽度为父元素的宽度
    • 可以设置宽和高
  • 行内元素： span a strong
    • 所有行内元素在一行显示
    • 不能直接设置宽和高
  • 行内块元素： img input
    • 元素在一行显示
    • 可以设置宽和高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            background-color: red;
        }
        span {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>我自己占一行</div>
    <input type="text" value="111">
    <input type="text" value="2222">
    <span>aaaa</span>
    <span>22222</span>
    <span>33333</span>
</body>
</html>

    <style>
        div {
            background-color: red;
            width: 100px;
        }
        input {
            width: 300px;
        }
        span {
            background-color: blue;
            width: 100px;
        }
    </style>

类型转换

三种类型可以互相转换，block: 块级元素， inline-block: 行内块yuansu, inline: 行内元素
display: block | inline-block | inline

注意

  • 样式设置有权重： ！important > 行内样式 > ID选择器 > 类选择器 > 标签选择器
  • 同一个标签权重相同，设置样式冲突，后面会覆盖前面的
  • 子元素会继承父元素部分属性：line-height,color,font-size,
  • !important,当某元素设置样式优先级更高时，但不想被覆盖，在后面加important，例如：color: red !important;
  • 玄同学只是把常用的列了出来，还有很多，需要同学们自己慢慢探索~关注公众号 玄同学，学习html
posted @ 2020-12-20 15:45  超超加油  阅读(63)  评论(0)    收藏  举报