css简单语法

最新推荐文章于 2024-06-09 19:43:32 发布
最新推荐文章于 2024-06-09 19:43:32 发布
阅读量122 收藏
点赞数
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/foolishpichao/article/details/103681837
版权 
<style>
    p{
        color:red;  <!--CSS语法-->
    }
    <!-- 选择器{属性：值}-->
</style>

元素选择器，id 选择器，类选择器

<style>
p{
  color:red;
}
</style>
 
<p>p元素</p>
<p>p元素</p>
<p>p元素</p>

<style>
p{
  color:red;
}
#p1{
  color:blue;
}
#p2{
  color:green;
}
</style>
 
<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>



<style>
.pre{
  color:blue;
}
.after{
  color:green;
}
</style>
 
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
 
<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>

用style设置尺寸大小

<style>
   p#percentage{
       width: 50%;
       height: 50%;
       background-color:pink;
   }

   p#pix{
       width: 180px;
       height: 120px;
       background-color:indianred;
   }
    </style>
     
    <p id = "percentage">我的</p>
    <p id = "pix">asdf</p>

 css制表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            .style{background-color:antiquewhite;}
            .style2{border-bottom: 2px darkgray solid;}
            .style3{border-bottom-color: darkgray;
                    border-bottom-style: solid;
                    border-bottom-width: 1px;
            }
            .my_table_style{
                border-bottom-color: darkgray;
                border-bottom-style: solid;
                border-bottom-width: 1px;
                border-collapse: collapse;
            }
        </style>
         
         <table width="400px"  height="100px" class="my_table_style " >
            <tr height="20%" class="style2">
                <th>id</th>
                <th>名称</th>
                <th>血量</th>
                <th>伤害</th>
            </tr>
            <tr height="20%"  class="style style3">
                <th>1</th>
                <th>gareen</th>
                <th>340</th>
                <th>58</th>
            </tr>
            <tr height="20%" class="style3">
                <th>2</th>
                <th>teemo</th>
                <th>320</th>
                <th>76</th>
            </tr>
            <tr height="20%" class="style style3">
                <th>3</th>
                <th>annie</th>
                <th>380</th>
                <th>38</th>
            </tr><tr height="20%" class="style3">
                <th>4</th>
                <th>deadbrother</th>
                <th>400</th>
                <th>90</th>
            </tr>
         </table>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            .style{background-color:antiquewhite;}
            .style2{border-bottom: 2px darkgray solid;}
            .style3{border-bottom-color: darkgray;
                    border-bottom-style: solid;
                    border-bottom-width: 1px;
            }
            .my_table_style{
                border-bottom-color: darkgray;
                border-bottom-style: solid;
                border-bottom-width: 1px;
                border-collapse: collapse;
            }
            div.reverse-triple{
                width: 0px;
                height: 0px;
                /* border: 10px solid red;
                
                border-left: 10px solid white;
                border-right: 10px solid white;
                border-bottom: 10px solid white; */


                border-top: solid red 20px;
                border-left: white solid 15px;
                border-right: white solid 15px;
            }
            td{
                /* width: 10px;
                height: 10px; */
                text-align: center;
                width: 100px;
                border-bottom: blue 4px solid;
            }
        </style>
         
         <table width="400px"  height="100px" class="my_table_style " >
            <tr height="20%" class="style2">
                <th>id</th>
                <th>名称</th>
                <th>血量</th>
                <th>伤害</th>
            </tr>
            <tr height="20%"  class="style style3">
                <th>1</th>
                <th>gareen</th>
                <th>340</th>
                <th>58</th>
            </tr>
            <tr height="20%" class="style3">
                <th>2</th>
                <th>teemo</th>
                <th>320</th>
                <th>76</th>
            </tr>
            <tr height="20%" class="style style3">
                <th>3</th>
                <th>annie</th>
                <th>380</th>
                <th>38</th>
            </tr><tr height="20%" class="style3">
                <th>4</th>
                <th>deadbrother</th>
                <th>400</th>
                <th>90</th>
            </tr>
         </table>

        <div class="reverse-triple"></div>
        <table>
            <tr>
                <td>商品</td>
                <td>价格</td>
                <td>数量</td>
                <td>小计</td>
            </tr>
        </table>
        
    </body>
</html>

CSS倒三角 两种方法，一种是border 一个边框，将其填满，然后 left right bottom切割，另一种可以是 top 然后用left 和 right切割即可。

cheerful_man
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css基础教程之CSS基础语法
09-25
尽管这种方法简单直接，但不推荐使用，因为它使得HTML和CSS混合，不利于代码的管理和维护。 2. **内嵌样式**：内嵌样式通常写在HTML文档的`<head>`标签内的`<style>`标签中，适用于整个页面的样式定义。例如： ```...
CSS 语法 学习css入门者看
09-27
CSS（Cascading Style Sheets）是一种用于描述网页及应用程序用户界面呈现方式的样式表...对于初学者，建议从简单的页面布局和样式设置入手，逐步深入到更高级的主题，同时不断参考和学习优秀的CSS代码，以提升技能。
CSS的基本语法
dianmou7334的博客
10-13 133
W3School离线手册(2017.03.11版)下载：https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A CSS（层叠样式表） 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算...
CSS的简单语法
云飞扬°的博客
05-11 100
CSS的简单语法 CSS的简单语法: 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中 <style> 选择器{ 属性名称:属性的值; 属性名称2: 属性的值2; } </style> ...
CSS语法简单入门
justJavaC的专栏
03-27 156
  整体组成 在CSS中，顶层元素被称为Rule，而CSS中的Rule又分为2类：CSSStyleRule和CSSAtKeywordRule。 CSSStyleRule是最基本的，即我们最常见的，由选择器+属性+值组成的部分，以下就是一个简单的示例： #nav&gt;li~li { float: left; margin-left: 7px; paddin...
flex4 css语法
confiy的专栏
12-06 133
问题： Adobe新发布的flash builder 4 中对css的支持更好了，那么支持到什么程度。有些什么具体的语法呢？我们一起看看吧。 解决方法： 我们将展示以下几种例子：通过命名空间来定义全局CSS样式；通过具体组件的ID来定义个别组件的样式；通过类里面的组件ID来定义样式；通过组件样式定义样式。 详细说明： 首先让我们新建一个application。如下。包...
CSS的简单使用
weixin_44702189的博客
10-25 1447
CSS概述 CSS是Cascading Style Sheets（级联样式表） CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分 CSS与HTML的关系 HTML是网页内容 CSS定义页面的样式 基本语法 基本语法-行内样式表 行内样式表,又有人称内联样式、行间样式、内嵌样式
CSS简单语法
qq_45284427的博客
06-09 282
专门建一个只写样式的1.css文件，在另一个页面中引入css文件。内嵌样式：影响当前页面的所有标签。行内样式：仅仅影响当前的标签。
CSS基本语法规则
qq_39162679的博客
07-06 6169
CSS写在style标签中，style标签一般写在head标签里面，title标签下面 ctrl+/ CSS注释快捷键 选择器 {css属性}内嵌式：CSS写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中 作用：当前页面 外联式：CSS写在一个单独的.css文件中 作用：多个页面 提示：需要通过link标签在网页中引入 行内式：CSS写在标签的style属性中 写法：style="属性：属性值" ​ 作用：当前标签 ​ 提示：基础不推荐使用，之后会配合js使
【CSS】基础语法
Carefree_State的博客
05-16 1108
CSS就像化妆一样，为我们的网页增添色彩。
css的基础语法
m0_51045721的博客
02-17 3344
四种选择器 ①标签选择器，以标签命名的选择器，但是选中所有的这个标签都生效css ②类选择器，.类名{css属性名:属性值;} 一个标签可以多个类名，空格隔开 类名只能由数字、字母、下划线、中划线组成，不能以数字或者中划线开头 类名只能由数字、字母、下划线、中划线组成，不能以数字或者中划线开头 一个标签可以多个类名，空格隔开 ③id选择器（用于配合js做美化） #id属性值{css属性名:属性值:} id属性是唯一的，不能重名 一个标签只能一个id属性值 一个id选择器只能选中.
动态的样式表lesscss:简单学习lesscss语法
09-25
LessCSS 语法简介 LessCSS 是一种动态样式表语言，它允许开发者使用变量、函数和运算符来书写 CSS 代码，从而提高了 CSS 的可读性和维护性。下面是 LessCSS 的一些基本语法和特点： 变量 LessCSS 允许使用变量来...
css3基础语法总结大全
06-19
以下是对CSS3基础语法的一些关键知识点的详细总结： 1. **选择器增强**： - **伪类和伪元素**：CSS3增加了许多新的伪类，如`:hover`, `:active`, `:focus`，以及`:nth-child()`, `:nth-last-child()`, `:first-...
CSS 教程之内容设置的一些语法
12-09
在CSS（层叠样式表）中，内容设置的语法至关重要，因为它们决定了元素内部文本的显示方式。本教程主要关注四个关键属性：`white-space`、`text-overflow`、`word-break` 和 `word-wrap`，这些属性帮助开发者更好地...
Crypto_30_vHsm_Types.h
07-09
Crypto_30_vHsm_Types
vmware虚拟机安装教程.pdf
最新发布
07-10
VMware虚拟机安装教程是一个详细且系统的过程，涵盖了从下载、安装到配置虚拟机的多个步骤。以下是一个详尽的VMware虚拟机安装教程，旨在帮助用户顺利搭建自己的虚拟环境。
11111111111
07-10
11111111111
nvidia平台torch-2.0.0.nv23.05-cp38-cp38-linux-aarch64安装包
07-09
特定版本的 PyTorch 包，专为 NVIDIA 的 Jetson 平台优化，并且适用于使用 Python 3.8 的 ARM64 架构（如 NVIDIA Jetson 系列设备）上的 Linux 操作系统 PyTorch 是一个广泛使用的开源机器学习库，主要用于深度学习和神经网络的构建和训练。它由 Facebook's AI Research Lab (FAIR) 开发和维护。 提供了强大的张量计算功能以及支持 GPU 加速的计算能力。
计算机试卷2.doc
07-10
### 内容概要 《计算机试卷1》是一份综合性的计算机基础和应用测试卷，涵盖了计算机硬件、软件、操作系统、网络、多媒体技术等多个领域的知识点。试卷包括单选题和操作应用两大类，单选题部分测试学生对计算机基础知识的掌握，操作应用部分则评估学生对计算机应用软件的实际操作能力。 ### 适用人群 本试卷适用于： - 计算机专业或信息技术相关专业的学生，用于课程学习或考试复习。 - 准备计算机等级考试或职业资格认证的人士，作为实战演练材料。 - 对计算机操作有兴趣的自学者，用于提升个人计算机应用技能。 - 计算机基础教育工作者，作为教学资源或出题参考。 ### 使用场景及目标 1. **学习评估**：作为学校或教育机构对学生计算机基础知识和应用技能的评估工具。 2. **自学测试**：供个人自学者检验自己对计算机知识的掌握程度和操作熟练度。 3. **职业发展**：帮助职场人士通过实际操作练习，提升计算机应用能力，增强工作竞争力。 4. **教学资源**：教师可以用于课堂教学，作为教学内容的补充或学生的课后练习。 5. **竞赛准备**：适合准备计算机相关竞赛的学生，作为强化训练和技能检测的材料。 试卷的目标是通过系统性的题目设计，帮助学生全面复习和巩固计算机基础知识，同时通过实际操作题目，提高学生解决实际问题的能力。通过本试卷的学习与练习，学生将能够更加深入地理解计算机的工作原理，掌握常用软件的使用方法，为未来的学术或职业生涯打下坚实的基础。
css html 语法,CSS基础语法
06-09
下面是一个简单的CSS代码示例： ```css p { color: red; font-size: 16px; font-weight: bold; } ``` 上面的代码将会把所有的`<p>`元素的文字颜色设置为红色，字体大小设置为16像素，字体加粗。 其中，`p`是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值