#CSS学习日记02

最新推荐文章于 2024-09-09 09:01:46 发布
最新推荐文章于 2024-09-09 09:01:46 发布
阅读量73 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47741303/article/details/115359988
版权

CSS链接
链接样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>链接样式</title> 
<style>
a:link{color: aquamarine;} /* 未访问链接*/
a:visited{color: cadetblue;} /* 已访问链接 */
a:hover{color: chocolate;} /* 鼠标移动到链接上 */
a:active{color: darkcyan;}/* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="https://blog.csdn.net/weixin_47741303?spm=1000.2115.3001.5343"target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

背景颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>链接样式</title> 
<style>
a:link{color: aquamarine;background-color: azure;} /* 未访问链接*/
a:visited{color: cadetblue;} /* 已访问链接 */
a:hover{color: chocolate;} /* 鼠标移动到链接上 */
a:active{color: darkcyan;}/* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="https://blog.csdn.net/weixin_47741303?spm=1000.2115.3001.5343"target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

可戳：添加不同样式的超链接-来源：菜鸟教程
创建链接框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>创建链接框</title> 
<style>
a:link,a:visited
{
	display:block;<!--让对象成为块级元素-->
	font-weight:bold;<!--font-weight为字体粗细属性-->
	color: chocolate;
	background-color: #7FFFD4;
	width: 7.5rem;
	text-align:center;
	padding:0.25rem;
	text-decoration: none;<!--表示属性规定添加到文本的修饰-->
}
a:hover,a:active
{
	background-color: darkcyan;
}
</style>
</head>

<body>
<a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>

CSS盒子模型
元素的宽度和高度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元素的宽度和高度</title>
<style>
div {
    background-color: lightgrey;
   width: 18.75rem;
    border: 1.5625rem solid #7FFFD4;<!--边框-->
    padding: 1.5625rem;<!--内边距-->
    margin: 1.875rem;<!--外边距-->
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 1.5625rem 内间距，1.875rem 外间距、1.5625rem 绿色边框。</div>

</body>
</html>

CSS边框
边框样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边框样式</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

边框宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边框宽度</title>
<style>
p.one 
{
	border-style:solid;
	border-width:0.3125rem;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:0.0625rem;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>

边框颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边框颜色</title>
<style>
p.one
{
	border-style:solid;
	border-color:red;
}
p.two
{
	border-style:solid;
	border-color: blueviolet;
} 
</style>
</head>

<body>
<p class="one">实线红色边框</p>
<p class="two">实线紫色边框</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。</p>
</body>
</html>

边框-单独设置各边

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<titl>边框-单独设置各边</titl></title>
<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
h3
{
	border-style:dotted solid;
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
<h3>也可以设置一个单一属性</h3>
</body>
</html>

CSS分组和嵌套选择器
分组选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>分组选择器</title> 
<style>
h1,h2,p<!--目的：为了尽量减少代码，每个选择器用逗号分隔-->
{
	color:green;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

嵌套选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>嵌套选择器</title> 
<style>
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
p.marked{
    text-decoration:underline;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
	
<p class="marked">带下划线的 p 段落。</p>
</body>
</html>
容我想想ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
#CSS学习日记01
weixin_47741303的博客
03-24 77
CSSId和Class选择器 id选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>id选择器</title> <!--id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id选择器一对一,只能对一个起作用--> <style> #para1 { text-align:center; color: aquamar
CSS学习日记3
m0_73936682的博客
03-25 114
可直接body来选择全体字体，引号包含，逗号隔开标题标签比较特殊，需要单独指定文字大小。
220219css学习日记
siecle的博客
02-19 262
一，注入方式 1.内嵌式 以<style>内容的形式，直接写在html文件中，一般写在<title>之后 </title> <style> p{ color :red font-size:69px } </style> 2.外联式 写在css文件中，用link来连接 html中： <head> <link rel="stylesheet" href="CSS的地址"> </head&g
css学习日记
qq_53589524的博客
04-26 343
css学习day1
Day1 CSS学习日记
Agirl07的博客
07-19 201
学习目标： 1.能够说出什么是CSS 2.能够使用CSS基础选择器 3.能够设置字体样式 4.能够设置文本样式 5.能够说出CSS的三种引入方式 6.能够说出Chrome调试工具调试样式 学习内容： 一 CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 1.1 HTML的局限性 1.2 CSS-网页的美容师 CSS是层叠样式表（Cascading　Style　Sheels）的简称。 有时我们也会称之为CSS样式表或级联样式表。 CSS也是一种标记语言。 CSS主要用于
CSS学习日记（列表）
inputlife的博客
09-02 133
列表 ：一系列相关数据的展现形式 分类：有序列表（ordered list）；无序列表(unorder list)；自定义列表 无序列表 <ul> <li>桔子</li> <li>香蕉</li> <li>苹果</li> </ul> 有序列表 <ol> <li>桔子</li> <li>香蕉</li&...
2024-06-10 CSS学习日记
meizhenglong123的博客
06-10 353
优点：能快速为页面中同类型的标签设计统一样式。缺点：不能差异化样式，只能选择当前所有标签。
css 学习日记
view_maker的博客
11-25 105
一、选择器 元素选择器 格式：标签名{} 例如:p{} 作用：选则页面中所有p标签 id选择器 格式:#id值{} 例如:#userId{**} 作用：选择页面中id值为userId的标签 类选择器 格式：.class值{} 例如:.cls1{**} 作用：选择页面中class值为cls1的标签 分组选择器 格式：选择器1,选择器2,选择器N{} 例如:p,#userId,a{**} 作用：选...
CSS学习日记1-CSS引用
qq_24681419的博客
08-01 140
一、CSS是个啥 1.Cascading Style Sheets（层叠样式表） 如果说html就是造房子的框架，那么css就是搞装修的。将html搭好的框架装修的非常美丽。一层层给它叠加样式。 2.CSS引用 其实就是房主需要联系装修队来装修，你不叫人家来装修，谁知道你要装修呀！ 有三种方式 1）内嵌 直接写在html中想要修饰的东西里。适合少量的修饰。比如只想修饰某个标签，那就不用大费周章的建个css文件啥的了。 <!DOCTYPE html> <html lang="en">
灯塔漫画背景个人日记CSS模板下载6166.zip
04-07
【标题】"灯塔漫画背景个人日记CSS模板下载6166.zip" 是一个前端开发资源，其中包含了一个设计独特的CSS模板，适用于创建具有漫画背景的个人日记网站。这个模板可能融合了现代网页设计趋势与漫画元素，为用户提供了...
yournal:一个使用 PHP、MySQL、Bootstrap、JS、HTML 和 CSS 的在线日记系统
06-17
《构建基于PHP、MySQL、Bootstrap、JS、AJAX与HTML/CSS的在线日记系统》 在信息化时代，人们越来越倾向于在线记录生活点滴，一个在线日记系统成为了一个实用且有趣的应用。本文将深入探讨如何利用PHP、MySQL、...
CSS学习日记：定位
m0_56424512的博客
11-28 590
css学习笔记
暑期学习日记13：CSS边框
weixin_48485475的博客
07-22 574
CSS边框
【css】获取最后一个li进行样式特殊处理
qq_43720551的博客
09-05 527
每项列表项添加一个margin，最后一个元素不添加。子元素，以便CSS选择器能够正确地应用样式。伪类选择器来选择列表中的最后一个。有个列表，列表项之间有一段间隔。确保在你的HTML代码中，你可以使用 CSS 的。
CSS之我不会
m0_51492817的博客
09-05 823
作用：选择页面上的某一个后者某一类元素。
CSS-1
Nozomi9967的博客
09-07 322
与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。词列表方法为一个元素同时设置多个样式。，但只可以用类选择器的方法实现，作用：可以选中所有html元素。的（不能使用 ID 词列表）。行内样式>内部样式=外部样式。
用CSS 方式设置 table 样式
最新发布
weixin_45274678的博客
09-09 851
在现代Web开发中，使用CSS来设置table的样式是一种常见且强大的方法，它能让你的表格数据既美观又易于阅读。下面我将通过一个示例来展示如何使用现代CSS技巧来美化表格。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1833
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
大数据开发shell学习日记
09-02
大数据开发中的shell学习日记可以包括以下内容： 1. 学习Linux命令和shell脚本：作为大数据开发者，在Linux下进行开发是常见的，因此了解一些基本的Linux命令和编写shell脚本的技能是必备的。 2. 学习Django：Django...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值