CSS基础一则（1）

最新推荐文章于 2023-06-30 09:36:11 发布

超超超超超给力

最新推荐文章于 2023-06-30 09:36:11 发布

阅读量341

点赞数 3

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/qq_31987533/article/details/110700188

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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。

超超超超超给力

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
CSS基础一则（1）

css美化页面书写类型行内式：只作用当前元素，对其他元素无效果<p style="color: red;">文本内容</p>内嵌式：只作用当前html页面，可对当前页面元素复用 /* 写在head标签里 */ <style> p { color: red; } </style>外联式：可对整个项目复用/* 在head标签下引入，index.css为外部
复制链接

扫一扫

专栏目录