CSS基础1--基础及语法

最新推荐文章于 2024-08-09 22:30:35 发布

伊洛的小屋

最新推荐文章于 2024-08-09 22:30:35 发布

阅读量112

点赞数

分类专栏： CSS基础文章标签： css html html5 javascript js

本文链接：https://blog.csdn.net/weixin_44386231/article/details/108576442

版权

CSS基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文首发公众号：伊洛的小屋，欢迎关注并查看更多内容！！！

CSS 基础

CSS 是Cascading Style Sheet的缩写，翻译为：‘层叠样式表’ 或 ‘级联样式表’。 CSS 定义如何显示HTML的标签样式，用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离，极大的提高了工作的效率

CSS语法

CSS是一门基于规则的语言

h1 {
    color: yellow;
    font-size: 3em;
}

语法由选择器起头，选择HTML元素，这里对h1标题添加央视大括号中定义属性和值，叫做声明。
冒号之前的是属性，后面的是值。一个CSS样式中可以包含多个规则

CSS模块

CSS是很多模块构成的

CSS规范

所有的标准Web技术都被定义在一个巨大的文档中，称作规范specifications (或者简称为 “specs”)，CSS也不例外

简单的应用一下

先来做一个简单的HTML页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS</title>
</head>

<body>

    <h1>TITLE DEMO</h1>

    <p>基金是小白理财最好的投资方式 <span>基金</span>
伊洛的个人网站 <a href="https://yiluotalk.com/">点击前往</a>.</p>

    <p>购买指数基金比购买个股风险会小很多 <em>风险</em> 降低风险</p>

    <ul>
        <li>个股</li>
        <li>基金</li>
        <li>宽指 <em>基金</em></li>
    </ul>

</body>

</html>

打开网页

现在用CSS美化一下网页

添加CSS

让HTML文档能够遵守我们给它的CSS规则，在文档的开头链接CSS,在head里面添加链接到CSS文件
在CSS文件中编写内容,让上面的标题显示紫色

h1 {
    color: purple;
}

打开浏览器查看效果

样式化 HTML 元素

样式化一个文档中所有的段落，使用选择器p,用逗号可以将不同选择器隔开

h1 {
    color: purple;
}

p, li {
    color: cornflowerblue;
}

打开浏览器

改变元素的默认行为

忽略浏览器默认的样式

h1 {
    color: purple;
}

p, li{
    color: cornflowerblue;
}

li{
    list-style-type: none;
}

打开浏览器

可见列表前面的默认样式已经没有了

使用类名

加入类名的特性

公号：伊洛的小屋
个人主页：https://yiluotalk.com/
博客园：https://www.cnblogs.com/yiluotalk/
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>CSS</title>
</head>

<body>

    <h1>TITLE DEMO</h1>

    <p>基金是小白理财最好的投资方式 <span>基金</span>
伊洛的个人网站 <a href="https://yiluotalk.com/">点击前往</a>.</p>

    <p>购买指数基金比购买个股风险会小很多 <em>风险</em> 降低风险</p>

    <ul>
        <li>个股</li>
        <li class="special">基金</li>
        <li>宽指 <em>基金</em></li>
    </ul>

</body>

</html>

打开浏览器

基金的颜色单独发生了变化

根据状态确定样式

取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的
没有被访问的链接颜色变为粉色、访问过的链接变为绿色及鼠标悬停的时候的样式

h1 {
    color: purple;
}

p, li{
    color: cornflowerblue;
}

li.special {
    color: orange;
    font-weight: bold;
}

a:link {
  color: pink;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

关注公众号获取更多内容

欢迎下方【戳一下】【点赞】
Author：伊洛Yiluo
愿你享受每一天，Just Enjoy !

伊洛的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础1--基础及语法

本文首发公众号：伊洛的小屋，欢迎关注并查看更多内容！！！CSS 基础CSS 是Cascading Style Sheet的缩写，翻译为：‘层叠样式表’ 或 ‘级联样式表’。 CSS 定义如何显示HTML的标签样式，用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离，极大的提高了工作的效率CSS语法CSS是一门基于规则的语言h1 { color: yellow; font-size: 3em;}语法由选择器起头，选择HTML元素，这里对h1标题添加央视大..
复制链接

扫一扫

专栏目录