css样式使用

最新推荐文章于 2023-03-08 17:17:30 发布
最新推荐文章于 2023-03-08 17:17:30 发布
阅读量222 收藏
点赞数
分类专栏： 前端css 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/valder__/article/details/127147706
版权

css样式使用

<html>
	<head>
		<title>css的样式使用</title>
		<meta charset="UTF-8"/>
		<!--声明代码域-->
		<style type="text/css">
		/*添加网页背景图*/
		body{
			background-image:url(img/1.jpg);
			/*自动在图片比列不失调的情况下使图片覆盖网页，可能会变成两张拼在一起*/
			background-repeat:no-repeat;/*设置图片不重复*/
			background-size:cover;/*设置图片平铺*/
		}
		
			/*使用标签选择器*/
			table{
				/*也可以不要表格边框，只留下单元格边框*/
				border:solid 1px;
				border-radius:10px; /*表示边框四角的角度*/
				
				/*背景图片*/
				background-image:url(img/1.jpg);
				background-size:cover;
			}
			
			/*设置行高*/
			tr{
				height:40px;
			}
			/*设置td,宽度一般在属性中设置*/
			td{
				border: solid 1px yellow;       /*直接在后面空格加颜色即可设置边框颜色*/
				/*border-top/bottom/left/right:none;表示上下左右不要边框*/
				border-radius:10px;      /*表示单元格四角的角度*/
				background-color:orange;
				/*设置字体一般在td中*/
				text-align:center;
				color:white;
				font-weight:bold;      /*字体加粗*/
				letter-spacing:10px;   /*字间距*/
			}
		</style>
	</head>
	<body>
		<h3>css的样式使用</h3>
		<hr />
		<table>
			<tr>
			<!--设置宽度一般在属性中设置-->
				<td width="100px">姓名</td>
				<td width="100px">性别</td>
				<td width="100px">爱好</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>唱歌</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>跳舞</td>
			</tr>
		</table>
	</body>
</html>
关于ul
<html>
	<head>
		<title>css的样式使用</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			ul{
				/*如果只写背景颜色，而不设置高则不会出现效果
				 因为左悬浮的时候默认ul的高度为0
				 必须设置高度值才有效果*/
				background-color:gray;
				height:50px;
			}
			li{
				list-style-type:none;  /*去掉前面的黑点*/
				/*将原本竖着排列的标签变成一行的*/
				/*display:inline;*/
				float:left;/*设置左悬浮*/
			}
			li a{
				color:black;
				text-decoration:none;/*去掉下划线*/
				font-weight:bold;
				font-size:20px;
				margin-left:20px;/*设置词与词之间的距离*/
				/*将标签在ul中居中显示*/
				position:relative;
				top:10px;
			}
		</style>
	</head>
	<body>
		<h3>css的样式使用</h3>
		<hr />
		<ul>
			<li><a href="">吃饭</a></li>
			<li><a href="">睡觉</a></li>
			<li><a href="">打豆豆</a></li>
		</ul>
	</body>
</html>
关于如何在文字后面加上红色*
<html>
    <head>
    	<meta charset="UTF-8"/>
        <style>
        	li.x:after{
				content:'*';
				color:red;
			}
        </style>
    </head>
    <body>
        <ol>
            <li class="x"></li>
        </ol>
    </body>
</html>
关于文本框变成一条横线这件事
input{
			/*设置文本框成为一个横线，将上左右的值设置为0*/
			border-bottom:2px solid grey;
			border-top:0;
			border-left:0;
			border-right:0;
                        outline:0;/*在点击时去掉边框*/
}
关于将文字居中
div{
			height:200px;
			line-height:200px;   /*设置line-height的大小与div的height一样，可以显示出文字垂直居中*/
			text-align:center;   /*设置文字水平居中*/
}
设置多/单选框大小
input{
	height:10px;
	transform:scale(1.5);/*设置单选多选框的大小，（）内大于1是放大，小于1是缩小*/
}

设置背景透明度

div{
	/*设置背景透明度：两种方法
		1.opacity:0~1;   缺点：将内容和背景都透明
		2.background-color:rgba(0,0,0,0~1);
		只透明背景，一般用这个
		rgba(r,g,b,a)  r：红色值 g：绿色值  b：蓝色值 a：透明度 0~1
	*/
		background-color:rgba(0,0,0,0.2);
}

##关于将文本域中的提示词删掉

<input type="text" name="date" placeholder="年\月\日" value=""/>
<!--placeholder="" 该属性可以让文本域中的提示词在点击后不用删除就可以直接写-->
Valder__
关注
专栏目录
CSS实现标题样式（自用笔记）
DT_XUE321的博客
04-30 4761
纯CSS实现简单标题样式 说明： ribbon为公用样式，ribbon1-6对应6个样式，：border， ：after 是伪元素 import React from 'react'; import './index.css' const Title = () => { return ( <div> <section> <h2><span>CSS3实现一些标题样式<
css标题样式_CSS的标题集样式
热门推荐
culiao9310的博客
09-28 1万+
css标题样式View demo 查看演示Download Source 下载源In this tutorial I’m hoping to give you some ideas and inspiration for your current and future projects! 在本教程中，我希望为您当前和将来的项目提供一些想法和启发！ Today...
css 实现 title的效果，并且自己写修改类似title样式
twinkle的博客
06-18 6524
效果如下： 代码如下： /** 使用data-tip来实现title的效果 */ // 通过属性选择器获取到标签，加上相对定位 [data-tip] { position: relative; display: inline-block; } // 统一设置伪类的样式 [data-tip]::before, [data-tip]::after { position: absolute; visibility: visible; opacity: 0; z-index: 2020
18款超看好纯css 标题栏
ranshakalove的博客
03-08 9069
18款超看好纯css 标题栏
标签title属性自定义样式
qq_45283694的博客
03-02 1959
标签title属性自定义样式
CSS样式初始化commonInitialize.css
01-18
CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先，我们来理解...
Css样式–字体样式和链接样式详解
12-13
1.指定字体：font-family （1）实用通用字体系列： 复制代码代码如下:body {font-family: sans-serif;} （2）制定字体系列： 复制代码代码如下: h1 {font-family: Georgia, <span xss=removed>serif;...
CSS学习之一 CSS样式的引入
12-12
2、type，总是设置为“text/css”，描述了使用link加载的数据类型；3、href，值为样式表的URL，可以是相对的也可以是绝对的；4、media，默认值是“all”，说明样式表要运用于表现的媒体，还有其他取值：aural（用于...
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
console 控制台 CSS样式 使用笔记
weixin_42731553的博客
07-30 2602
控制台可以使用%c为打印内容定义样式，%c之前的文本不受影响，之后的文本内容受后面参数中的CSS样式影响。You can use the %c directive to apply a CSS style to console output.The text before the directive will not be affected, but the text after the di...
修改title样式_从CSS到LESS,网页样式工具入门
weixin_39608063的博客
12-03 589
样式文件是现代网页设计技术的基础之一，从 html 文件中剥离出样式表 css 文件和 js 脚本文件，让网页设计脚本、样式和内容各自分开，才使得互联网工程更容易组织、建设与维护。1. CSS基本概念CSS规则主要由选择器及声明两部分组成，类似 selector{property1:value1,property2:value2} 形式，例如：h1 {color:red; font-size:14...
CSS修改鼠标悬停时title属性的展示样式
weixin_53874202的博客
07-15 6433
鼠标悬停title属性展示样式
css 实现title效果
Fisher_yu01的博客
05-12 4605
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .my...
纯css写标题样式，时间引导图
岁月如歌去，十年弹指间
11-28 3424
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
html中如何在标题中加样式,css如何实现title效果
weixin_40001372的博客
05-31 618
css如何实现title效果1、首先在元素上添加自定义数据data-title；2、然后通过伪类选择器:hover和::after设置悬浮显示的样式3、最后通过attr()获取自定义的数据即可。(推荐学习：CSS视频教程)代码如下：Documentdiv {position: relative;}div:hover::after {content: attr(data-title); /*取到da...
box-shadow属性四个值_CSS中简写属性要注意TRouBLe的顺序，避免踩坑
weixin_39775106的博客
11-28 1256
简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;还有如下属性：background是多个背景属性的简...
修改title样式_css常见样式命名规则
weixin_39737757的博客
12-04 919
前言也许你曾经看到过很多样式命名规则，也参考了我们制定的命名规范，但是大部分的具体样式还是不知道如何命名，主要思想或者标准是什么，也就是前面.m-panel-后面的应该如何命名，子模块与父模块依赖关系怎么体现，等等类似的问题。如何友好科学的解决问题，能够与最大程度的降低我们后期对样式的维护难度。 本文将带你了解目前前端基本的命名规则，各自的优劣，然后我们会给出具体的方案。一 指定的格式驼峰式命名类...
css修改元素属性title
weixin_38355349的博客
04-15 8529
css修改元素里面的title的样式 优点：样式可以自定设置，位置设置后就固定了； 缺点：不能像title一样随时出现在鼠标所在点位置。 <div data-title="标题" class="tip">我是一个测试</div> .tip{ position: relative; } .tip:hover:after { position:absolute; top...
CSS基础
weixin_48598008的博客
12-19 251
CSS CSS入门 如何学习 CSS是什么 CSS怎么用 CSS选择器（难点，重点） 美化网页（文字，阴影，超链接，列表，渐变······） 盒子模型 浮动 定位 网页动画（特效效果） 什么是CSS Cascading style Sheet 层叠级联样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动······ 快速入门 style 基本入门： <!DOCTYPE html> <html lang="en"> <head&gt
vue3 css 样式使用v-bind
最新发布
06-11
在Vue3中，可以使用`v-bind`指令来动态绑定CSS样式。可以直接在`v-bind`后面跟一个CSS属性名和一个JavaScript表达式，这个表达式的结果会被当作CSS属性值。 例如，假设我们需要动态绑定一个元素的颜色样式，可以这样写： ```html <template> <div :style="{ color: textColor }">Hello World</div> </template> <script> export default { data() { return { textColor: 'red' } } } </script> ``` 在上面的例子中，我们使用了`:style`指令来绑定样式，然后使用`textColor`变量来设置颜色值。最终，该元素的文字颜色就会变成红色。 除了直接使用JavaScript变量，还可以使用三元表达式、计算属性等方式来动态绑定CSS样式。 希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值