CSS网页元素

2024年4月28日 互联网

  • span标签：重点要突出的字，使用span标签套起来

    <head><meta charset="UTF-8"><title>span</title><style type="text/css">#java{font-size:50px}</style>
</head>
<body>
欢迎学习<span id="java">Java</span>
</body>

  • 字体样式

    <head><meta charset="UTF-8"><title>字体样式</title><!-- font-family:字体font-size:字体大小font-weight:字体粗细color:字体颜色--><style type="text/css">body{font-family: "Arial Black",楷体;clolr:#a13d30;}h1{font-size:50px;}.p1{font-weight:bold;}</style>
</head>
<body>
<h1>标题</h1>
<p class="p1">第一段
</p>
<p>第二段
</p>
<p>Hello
</p>
</body>

  • 文本样式

    <head><meta charset="UTF-8"><title>文本样式</title><!-- 颜色：单词RGB 0~FRGBA A:0~1text-align:排版，居中text-indent:2em 首行缩进两个字符行高和块的高度一致，就可以上下居中text-decoration:underline 下划线text-decoration:line-through 中划线text-decoration:overline 上划线text-decoration:none 去除下划线vertical-align:middle 水平对齐，需要参照物--><style type="text/css">h1{color:rgba(0,255,255,0.9);text-align:center;}.p1{text-indent:2em;}.p3{background:blue;height:300px;line-height:300px;}img,span{vertical-align:middle;}</style>
</head>
<body>
<h1>标题</h1>
<p class="p1">第一段
</p>
<p>第二段
</p>
<p class="p3">Hello
</p>
<p><img src="images/a.png" /><span>你好</span>
</p>    
</body>

  • 文本阴影和超链接伪类

    <head><meta charset="UTF-8"><title>阴影和超链接伪类</title><style type="text/css">/*默认的颜色*/a{text-decoration:none;color:#000000;}/*鼠标悬浮的状态(重点)*/a:hover{color:orange;font-size:10px;}/*鼠标按住未释放的状态*/a:active{color:green;}/*文本阴影*/#price{text-shadow: blue 10px 10px 10px;/*阴影颜色 右偏移 下偏移 阴影半径*/}</style>
</head>
<body><a href="#"><img src="images/a.jpg"></a><p><a href="#">码出高效：Java开发手册</a></p><p><a href="#">作者：孤尽老师</a></p><p id="price">￥99</p>
</body>

  • 列表样式

    <head><meta charset="UTF-8"><title>列表样式</title><style type="text/css">/*list-style：none 去掉圆点circle 空心圆decimal 数字square 正方形*/ul li{height: 30px;list-style: none;text-indent: 1em;}</style>
</head>
<body>
<h2 class="title">商品分类</h2>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>
</body>

  • 背景

    <head><meta charset="UTF-8"><title>背景</title><style type="text/css">div{width:1000px;height:800px;border:1px solid red; /*边框宽度 样式 颜色*/background-image:url("images/bj.jpg"); /*默认是平铺repeat*/}.div1{background-repeat:repeat-x; /*水平平铺*/}.div2{background-repeat:repeat-y; /*垂直平铺*/}.div3{background-repeat:no-repeat; /*不平铺*/}</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>

  • 渐变

    渐变颜色参考：https://www.grabient.com/

    <head><meta charset="UTF-8"><title>渐变</title><style type="text/css">body{background-color: #00DBDE;background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);}</style>
</head>
<body>
</body>
最新文章