CSS常见样式

最新推荐文章于 2024-08-08 15:02:59 发布
最新推荐文章于 2024-08-08 15:02:59 发布
阅读量50 收藏
点赞数
文章标签： css 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_76679440/article/details/133817650
版权

基本语法

1.语法结构：
选择器
{
属性：属性值；
属性：属性值；
}
2.控制字体：
设置字号----font-size:12px;
设置颜色----color:英文单词;
设置字体----font-family:“宋体”;
设置粗细----font-weight:bold;
设置行高----line-height:150%,1.5em,20px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常见样式</title>
    <style>
        p
        {
            font-size: large;
            color: red;
            font-family: "宋体";
            line-height: 300%;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    
</body>
</html>

3.样式的特点：
（1）继承性：页面中子元素将会继承父元素的样式
（2）层叠性：子元素与父元素同时存在，子元素会覆盖掉父元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式的特点</title>
    <style>
        body
        {
            color: red;

        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式的特点</title>
    <style>
        body
        {
            color: red;

        }
        p
        {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

在这里插入图片描述4.控制文本
text-align----文本对齐方式：left，right，center

标签含义
text-indent设置文本的缩进：2em（可以取负数）
text-align文本对齐方式：left，right，center
text-transform文本的大小写
text-decoration超链接下划线
list-style无序列表前方序号形状

5.案例：导航栏样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        *
        {
            margin: 0;/*外对其*/
            padding: 0;/*内对其*/
        }
        .nav/*盒子标签*/
        {
            border: 1px solod black;
            width: 1080px;
            height: 60px;
            background-image: url(../img/bg.jpg);  /*background-color: black;*/
        }
        li
        {
            /* border: 1px solid black; */
            width: 120px;
            height: 60px;
            float: left;
            list-style: none;
            text-indent: 2em;
           
        }
        a/*注意就近原则！有些需要写在"a"标签里，有些需要写在"li"里*/
        {
            color: white;
            font-size: 18px;
            font-family: "宋体";
            line-height: 60px;
            text-decoration: double;
            /* text-indent: 2em; */

        }
        li:hover
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">游戏一</a></li>
            <li><a href="#">游戏二</a></li>
            <li><a href="#">游戏三</a></li>
            <li><a href="#">游戏四</a></li>
            <li><a href="#">游戏五</a></li>
            <li><a href="#">游戏六</a></li>
            <li><a href="#">游戏七</a></li>
            <li><a href="#">游戏八</a></li>
            <li><a href="#">游戏九</a></li>
        </ul>
    </div>
  
</body>
</html>

在这里插入图片描述

6.案例：商品展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示</title>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }
        .container
        {
            /* border: 1px solid black; */
            width: 1200px;
            height: 2000px;
            margin: 0 auto;
        }
        .goods
        {
            border: 1px solid white;
            width: 250px;
            height: 400px;
            float: left;
            margin:  10px;
        }
        .goods:hover
        {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="goods">
            <img src="./哆啦A梦 (1).jpg" width="250px" height="300px">
            <div style="/*border: 1px solid black;*/  height: 30px;">
                <span style="color: red; font-size: 17px; font-weight: bold; line-height: 5px; margin-left: 5px;">$70</span>
                <span style="color: #999999; float: right; margin-right: 5px;">2000人付款</span>
            </div>
            <p><a href="#" style="color: #999999; text-decoration: none; font-size: 13px; margin-left: 5px; font-weight: bold;">哆啦A梦玩偶,重庆直邮</a></p>
            <div style="/*border: 1px solid black;*/   height: 30px; line-height: 40px;">
                <span style="margin-left: 5px; color: #999999; font-weight: bold;">XXX玩偶官方旗舰店</span>
                <span style="color: #999999; float: right; margin-right: 5px;">重庆 巴南</span>
            </div>
        </div>
        <div class="goods">
            <img src="./哆啦A梦 (1).jpg" width="250px" height="300px">
            <div style="/*border: 1px solid black;*/  height: 30px;">
                <span style="color: red; font-size: 17px; font-weight: bold; line-height: 5px; margin-left: 5px;">$70</span>
                <span style="color: #999999; float: right; margin-right: 5px;">2000人付款</span>
            </div>
            <p><a href="#" style="color: #999999; text-decoration: none; font-size: 13px; margin-left: 5px; font-weight: bold;">哆啦A梦玩偶,重庆直邮</a></p>
            <div style="/*border: 1px solid black;*/   height: 30px; line-height: 40px;">
                <span style="margin-left: 5px; color: #999999; font-weight: bold;">XXX玩偶官方旗舰店</span>
                <span style="color: #999999; float: right; margin-right: 5px;">重庆 巴南</span>
            </div>
        </div>
        <div class="goods">
            <img src="./哆啦A梦 (1).jpg" width="250px" height="300px">
            <div style="/*border: 1px solid black;*/  height: 30px;">
                <span style="color: red; font-size: 17px; font-weight: bold; line-height: 5px; margin-left: 5px;">$70</span>
                <span style="color: #999999; float: right; margin-right: 5px;">2000人付款</span>
            </div>
            <p><a href="#" style="color: #999999; text-decoration: none; font-size: 13px; margin-left: 5px; font-weight: bold;">哆啦A梦玩偶,重庆直邮</a></p>
            <div style="/*border: 1px solid black;*/   height: 30px; line-height: 40px;">
                <span style="margin-left: 5px; color: #999999; font-weight: bold;">XXX玩偶官方旗舰店</span>
                <span style="color: #999999; float: right; margin-right: 5px;">重庆 巴南</span>
            </div>
        </div>
        <div class="goods">
            <img src="./哆啦A梦 (1).jpg" width="250px" height="300px">
            <div style="/*border: 1px solid black;*/  height: 30px;">
                <span style="color: red; font-size: 17px; font-weight: bold; line-height: 5px; margin-left: 5px;">$70</span>
                <span style="color: #999999; float: right; margin-right: 5px;">2000人付款</span>
            </div>
            <p><a href="#" style="color: #999999; text-decoration: none; font-size: 13px; margin-left: 5px; font-weight: bold;">哆啦A梦玩偶,重庆直邮</a></p>
            <div style="/*border: 1px solid black;*/   height: 30px; line-height: 40px;">
                <span style="margin-left: 5px; color: #999999; font-weight: bold;">XXX玩偶官方旗舰店</span>
                <span style="color: #999999; float: right; margin-right: 5px;">重庆 巴南</span>
            </div>
        </div>
        <div class="goods">
            <img src="./哆啦A梦 (1).jpg" width="250px" height="300px">
            <div style="/*border: 1px solid black;*/  height: 30px;">
                <span style="color: red; font-size: 17px; font-weight: bold; line-height: 5px; margin-left: 5px;">$70</span>
                <span style="color: #999999; float: right; margin-right: 5px;">2000人付款</span>
            </div>
            <p><a href="#" style="color: #999999; text-decoration: none; font-size: 13px; margin-left: 5px; font-weight: bold;">哆啦A梦玩偶,重庆直邮</a></p>
            <div style="/*border: 1px solid black;*/   height: 30px; line-height: 40px;">
                <span style="margin-left: 5px; color: #999999; font-weight: bold;">XXX玩偶官方旗舰店</span>
                <span style="color: #999999; float: right; margin-right: 5px;">重庆 巴南</span>
            </div>
        </div>
        <div class="goods">
            <img src="./哆啦A梦 (1).jpg" width="250px" height="300px">
            <div style="/*border: 1px solid black;*/  height: 30px;">
                <span style="color: red; font-size: 17px; font-weight: bold; line-height: 5px; margin-left: 5px;">$70</span>
                <span style="color: #999999; float: right; margin-right: 5px;">2000人付款</span>
            </div>
            <p><a href="#" style="color: #999999; text-decoration: none; font-size: 13px; margin-left: 5px; font-weight: bold;">哆啦A梦玩偶,重庆直邮</a></p>
            <div style="/*border: 1px solid black;*/   height: 30px; line-height: 40px;">
                <span style="margin-left: 5px; color: #999999; font-weight: bold;">XXX玩偶官方旗舰店</span>
                <span style="color: #999999; float: right; margin-right: 5px;">重庆 巴南</span>
            </div>
        </div>
        <div class="goods">
            <img src="./哆啦A梦 (1).jpg" width="250px" height="300px">
            <div style="/*border: 1px solid black;*/  height: 30px;">
                <span style="color: red; font-size: 17px; font-weight: bold; line-height: 5px; margin-left: 5px;">$70</span>
                <span style="color: #999999; float: right; margin-right: 5px;">2000人付款</span>
            </div>
            <p><a href="#" style="color: #999999; text-decoration: none; font-size: 13px; margin-left: 5px; font-weight: bold;">哆啦A梦玩偶,重庆直邮</a></p>
            <div style="/*border: 1px solid black;*/   height: 30px; line-height: 40px;">
                <span style="margin-left: 5px; color: #999999; font-weight: bold;">XXX玩偶官方旗舰店</span>
                <span style="color: #999999; float: right; margin-right: 5px;">重庆 巴南</span>
            </div>
        </div>
        <div class="goods">
            <img src="./哆啦A梦 (1).jpg" width="250px" height="300px">
            <div style="/*border: 1px solid black;*/  height: 30px;">
                <span style="color: red; font-size: 17px; font-weight: bold; line-height: 5px; margin-left: 5px;">$70</span>
                <span style="color: #999999; float: right; margin-right: 5px;">2000人付款</span>
            </div>
            <p><a href="#" style="color: #999999; text-decoration: none; font-size: 13px; margin-left: 5px; font-weight: bold;">哆啦A梦玩偶,重庆直邮</a></p>
            <div style="/*border: 1px solid black;*/   height: 30px; line-height: 40px;">
                <span style="margin-left: 5px; color: #999999; font-weight: bold;">XXX玩偶官方旗舰店</span>
                <span style="color: #999999; float: right; margin-right: 5px;">重庆 巴南</span>
            </div>
        </div>

    </div>
</body>
</html>

在这里插入图片描述
（其中有许多标签是笔记里没有写的，需要读者有一定的自学能力去"W3school"网站自行搜索学习，另外，因时间仓促和作者水平有限等原因，导致代码编写复杂不便观看，请读者见谅。）

高焱博
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Python全栈（九）Web前端基础之3.CSS常见样式和选择器
CUFEECR的博客
08-16 3133
CSS常见文本样式包括颜色、大小、字体等，颜色有4种表示形式；列表常见样式包括类型、图片和位置等；背景样式包括颜色、图片、重复方式、位置；浮动主要为了脱离文档流的垂直排列、变为行内元素，存在高度塌陷问题，有3种解决办法。元素选择器是已经存在的标签的元素名称；使用id选择器给某一唯一元素设置格式；给某一类标签设置同一个样式使用类选择器；匹配所有元素使用通配选择器；群组选择器可以抽离相同样式；包含选择器给某元素的子元素设置样式；伪类选择器可以向超链接添加特殊效果；选择器优先级行内样式最高，通配选择器最低。
CSS常见样式的介绍和使用（附加案例）
PIKapikaaaa的博客
03-21 6807
CSS常见样式的介绍和使用（附加案例） 选择器的理解与应用 常见样式 附加案例
CSS常用样式
二哈喇子！
07-06 1043
文体样式、文字样式、列表样式、背景样式、鼠标样式、伪类样式、透明度
CSS常见样式及属性
袅袅青烟散的博客
04-08 332
CSS常见样式及属性
css 常见的美观样式
yiyueqinghui的博客
02-21 1035
【代码】css 常见的美观样式。
常用CSS样式大全（超全面）
热门推荐
zy1992As的博客
02-28 1万+
14||字体||{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}5||垂直对齐||{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
CSS列表样式
m0_57774967的博客
04-28 2590
css列表属性作用： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 在html中，有两种类型的html列表： 无序列表：列表项的标记使用特殊图形（如小黑点、小方框等） 有序列表：列表项的标记使用数字或字母 使用css，可以列出进一步的样式，并可用图像作列表项标记 不同的列表项标记 list-style-type 属性指定列表项标记的类型 下面是对list-style-type属性的常见属性值的描述： none：不使用项...
Css常用样式归纳总结
nx_live的博客
04-16 2017
css常用样式归纳
CSS 常见样式 特殊用法 贯穿线&徽章&箭头
izhaong
04-28 1662
贯穿渐变线,中间插值 如图: <h3 class="brief-modal-title"> <span>公告</span> </h3> .brief-modal-title position relative text-align center margi...
CSS 鼠标样式和手指样式整理
12-10
本文将详细介绍15种常见的CSS鼠标样式及其应用场景。 1. `cursor: hand` 或 `cursor: pointer`：这是最常见的鼠标样式，通常用于链接或可点击的元素，表示用户可以进行点击操作。在大多数现代浏览器中，`cursor: ...
CSS通用样式基本文档
10-25
通过以上分析可以看出，这套CSS通用样式集合覆盖了前端开发中常见的布局需求，如全局样式设置、文档结构样式、输入控件样式、列表样式、图片样式、链接样式、文本对齐方式以及其他常用样式。这些样式不仅能够帮助...
CSS表格样式1
05-27
由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）元素组成。CSS可以帮助我们...
CSS样式初始化commonInitialize.css
01-18
3. **元素样式初始化**：针对常见的HTML元素，如`h1`到`h6`标题、段落`p`、列表`ul`和`ol`、链接`a`等，进行统一的样式设置，如文本颜色、字体、对齐方式等。 4. **清除浮动**：为了避免浮动元素导致的父级元素高度...
css 常用公共样式 样式总结（持续更新）
09-27
在CSS世界中，公共样式是开发者常常需要掌握的基础，它们能帮助我们构建高效、一致的网页布局。本文将深入探讨“css常用公共样式”的总结，包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用...
CSS 设置hr样式
最新发布
本人小可爱
08-08 504
【代码】CSS 设置hr样式。
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 215
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
怎么在 tailwindcss 项目中自定义一些可复用的样式
前端原创分享，常年坚持记录和分享，全网阅读量超百万
08-08 220
这些方法可以帮助你创建可复用的自定义样式,同时保持与 Tailwind 的一致性。选择哪种方法取决于你的具体需求和项目结构[1][2][4][5]。
CSS 多按钮根据半圆弧度排列
前端技术
08-08 383
多个按钮根据弧度，延边均匀排列。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值