CSS学习

已于 2024-05-15 23:58:57 修改
阅读量903 收藏 13
点赞数 17
分类专栏： Web 大一学java 文章标签： css 学习 前端
于 2024-05-15 23:52:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_82385265/article/details/138922004
版权

CSS学习

对于前端开发来说，把内容和样式分离，提高开发效率

大纲

  1. 基本语法

具体案例

CSS基本语法

css语法可以分为两部分：(1) 选择器 (2) 声明
在这里插入图片描述
CSS 注释：/注释内容/,类似Java

代码位置

放在head标签里面(style部分)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        
    </style>
</head>
<body>

</body>
</html>

设置边框

<style type="text/css">
        div{
            border: 1px dashed blue;
        }
    </style>

也可以使用border-width设置宽度，顺时针设置

设置颜色

这里的颜色设置有三种方式
在这里插入图片描述

设置宽高度

这里高度和宽度除了可以使用像素，还可以使用百分比(占页面的多少)
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            color: black;
            width: 300px;
            height: 200px;
            border: 1px dashed blue;
            background-color: aqua;
            font-size: 40xp;
            font-weight: bold;
            font-family: "Arial Narrow";
        }
    </style>
</head>
<body>
<div>烦死了</div>
</body>
</html>

设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            background-color: aqua;
        }
    </style>
</head>
<body>
<div>烦死了</div>
</body>
</html>

设置字体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            font-size: 40xp;
            font-weight: bold;
            font-family: "Arial Narrow";
        }
    </style>
</head>
<body>
<div>烦死了</div>
</body>
</html>

DIV居中

使用margin设置元素的边距，auto表示自动调配

<style type="text/css">
        div{
            margin-left: auto;
            margin-right: auto;
        }
    </style>

文本居中

当然也可以设置靠左和靠右

<style type="text/css">
        div{
            text-align: center;
        }
    </style>

超链接去下划线

去除超链接的下划线

<style type="text/css">
        a{
            text-decoration: none;
        }
    </style>

表格细线

<style type="text/css">
        table,td,tr{
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>

列表去修饰

<style type="text/css">
        ul{
            list-style: none;
        }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            color: black;
            width: 300px;
            height: 200px;
            border: 1px dashed blue;
            background-color: aqua;
            font-size: 40xp;
            font-weight: bold;
            font-family: "Arial Narrow";
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        table,td,tr{
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div>烦死了</div>
<a href="https://www.baidu.com">点击前往</a>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ul>
</body>
</html>

CSS三种使用方式

  1. 直接在头head里面使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--    在head里面使用-->
    <style type="text/css">
        div{
            color: black;
            width: 300px;
            height: 200px;
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<div>烦死了</div>
</body>
</html>
  1. 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
</head>
<body>
<!--直接在标签里面设置style-->
<div style="border: black;width: 300;color: blue" >烦死了</div>
</body>
</html>
  1. 引入外部CSS文件(推荐使用)引入位置还是在head
    这是主Html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--    引入我们编写的样式表-->
    <link rel="stylesheet" href="example.css">
</head>
<body>
<div >烦死了</div>
</body>
</html>

这是样式表

div{
    width: 300px;
    height: 200px;
    color: bisque;
}

选择器

元素选择器

作用于全部
在这里插入图片描述

ID选择器

作用于唯一
对有特殊要求的标签进行修饰
首先要对特殊需求的标签定义一个id
再指定id设置样式
注意：设置id时，id唯一
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<style type="text/css">
    /*通过指定id来设置属性*/
    /*注意设置的id唯一，不能相同*/
    #cs1 {
        color: blue;
    }
    #cf1 {
        color: aqua;
    }
</style>
</head>
<body>
/*通过指定id来设置属性，id唯一*/
<div id="cs1">烦死了</div>
<div id="cf1">id选择器</div>
</body>
</html>

类选择器

作用于部分
用来修饰某一类有相同需求的标签
class可以重复
下图是.class
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<style type="text/css">
    div{
        color: black;
    }
    /*通过指定class来设置属性*/
    /*设置的class不唯一*/
    .t2 {
        color: blue;
    }
</style>
</head>
<body>
<div >烦死了</div>
<!--通过设置class，让下面两个div是一类的样式-->
<div class="t2">类选择</div>
<div class="t2">类选择</div>
</body>
</html>

组合选择器

可以让多个选择器共用同一份样式
在这里插入图片描述

选择器的优先级

行内样式 > ID选择器 > class选择器 > 元素选择器

挽天java
关注
  • 17
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML和Css的学习
SYX_lh的博客
10-19 3274
学习HTML和Css
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
CSS学习总结
09-24
本文是小编日常整理了关于css学习总结相关知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
CSS学习心得
weixin_47223561的博客
03-30 1700
CSS一、CSS简介二、CSS语法1.id 选择器2.class 选择器三、CSS的应用1、外部样式表2、内部样式表3、内联样式四、颜色、尺寸、对齐五、CSS文档分析1、盒子模型2、边框与边距3、定位4、溢出 overflow5、浮动 float6、不透明度7、组合选择器总结 一、CSS简介 CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是
HTML+CSS学习总结
weixin_53351919的博客
06-26 2696
html+css学习总结
CSS入门
foreverking_的博客
04-17 4076
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 CSS从入门到精通 主讲：hector 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 示
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS 学习笔记
09-25
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
css学习文档
09-03
CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面
CSS 学习心得
12-09
不论页面的问题大小都统统交给他们解决，这样不仅影响了自己的工作效率，还给UED的同事带去不少麻烦，正好这几天工作不是很紧张，在http://www.w3school.com.cn/index.html网站上浏览了一些关于CSS的资料，感觉CSS比...
黑马程序员pink老师_CSS学习笔记
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
CSS学习笔记
Curry_On的博客
10-26 2235
CSS学习笔记 本文根据B站pink老师视频整理，供复习参考 笔记内容（更新中）：
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2057
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS实现一个雨滴滑落效果
云加速
05-28 1452
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css :hover的使用
qq_44792224的博客
05-31 209
即鼠标移入类名为btn的元素时，她的子元素i样式发生改变 自身的样式也发生改变 ，如果他有更多的子元素也可以这样写。
CSS 空间转换 动画
qq_67140973的博客
05-31 310
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
【JS实战案例汇总——不定时更新版】
微木
05-30 358
练习JS的实用案例，倒计时算法、定时轮播图
Python私教张大鹏 Vue3整合Tailwindcss之size样式类
最新发布
Python私教
06-05 636
1到12是连续的数字，间隔1。12到64间隔4。最大的是96。支持2,3,4,5,6,12百分比。
CSS中绝对定位和百分比问题（CSS中的小细节）
2301_79858914的博客
06-01 435
在 CSS 中，百分比高度的计算依赖于父元素的高度。如果父元素的高度不明确或由内容动态计算，子元素的百分比高度可能无法正确应用。使用绝对定位可以解决这个问题，因为绝对定位元素的百分比高度相对于最近的已定位祖先元素计算，而且是相对于最近的已定位祖先元素的实际高度（也就是由内容撑开的），即使已定位祖先元素没有显示设置height属性。显式设置父元素高度或使用 Flexbox 和 Grid 等现代布局技术也能有效解决这一问题。
htmlcss学习感悟
06-07
作为一个 AI，我并没有学习过 HTML 和 CSS，但可以通过分析用户的使用情况和搜索历史来得出一些结论和建议。 首先，学习 HTML 和 CSS 是非常有用的，因为这是构建网站和应用程序的基础。HTML 是用于创建网页内容的标记语言，CSS 则用于控制网页的样式和布局。学习这两门技术可以让你更好地理解网页的结构和设计，从而让你更好地创造和定制自己的网站。 其次，学习 HTML 和 CSS 并不难，因为它们是非常直观和易于理解的语言。如果你想入门，可以从一些免费的在线教程和视频课程开始学习，也可以参加一些线下培训班和课程。在学习的过程中，多练习、多实践，不断尝试创建一些简单的网页和应用程序，这样才能更好地掌握这些技能。 最后，学习 HTML 和 CSS 不仅是一种技能，更是一种思维方式。通过学习这两门技术，你可以培养出一种逻辑思维和设计感，让你在其他领域也能更好地进行创新和设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

挽天java

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值