CSS学习第一天：基本概念与简单样式-优快云博客

本文链接：https://blog.youkuaiyun.com/CSNMD/article/details/144186212

CSS学习第一天

内容总结
什么是CSS
选择器，优先级及其权重
样式的继承
基本样式
小结

内容总结

1、CSS基本概念
2、简单样式属性

什么是CSS

1、CSS是用来美化Web页面的

2、形式上，CSS由选择器和键值对构成

案例说明

body {
    background-color:#d0e4fe;
}
h1 {
    color:orange;
    text-align:center;
}
p {
    font-family:"Times New Roman";
    font-size:20px;
}

选择器，优先级及其权重

css样式设置完后，需要声明作用范围。这个时候就需要用到选择器

css选择器非常复杂，非常灵活，但是常用的也就id、class、标签、属性等选择器方式就够了

实在有复杂的选择器需求，可以查手册、问AI

样式的继承

部分父元素的属性，可以被继承到子元素中

默认设置继承的属性：文字属性，文本缩进、对齐、行高

基本样式

字体相关

基本样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_基本样式属性</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #app {
            width: 200px;
            height: 200px;
            color: red;
            background-color: aqua;
            text-align: center;
            line-height: 200px;
            font-family: Arial;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div id="app">
    哇哈哈
</div>
</body>
</html>

链接

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

删除链接中的下划线

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

链接背景色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

列表

CSS 列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

无序列表如下所示:

Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola

有序列表如下所示:

Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola

表格

table, th, td
{
    border: 1px solid black;
}

折叠边框

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

CSS的基本属性都是一些键值对，比较简单，日常使用以查阅手册为主

小结

CSS，多查手册多练习