css样式

已于 2023-07-02 12:09:42 修改
阅读量46 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
于 2023-06-29 20:16:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GQK11/article/details/131463680
版权

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
           /* !*字体类型*!
            font-family: Calibri;
            !*字体大小*!
            font-size: 50px;
            !*
                字体风格
                normal   默认
                italic   斜体
            *!
            font-style: italic;
            !*
                字体粗细
                normal   默认
                bold 加粗
                bolder 更粗
                lighter 更细
                数字：100、200、300、400、500、600、700、800、900
            *!
            font-weight: bold;*/
            /*
                font属性
                字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
            */
            font: italic 100 30px Arial;
        }
    </style>
</head>
<body>
<p>标题</p>

</body>
</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            /*文本颜色*/
            color: #FAA53B;
            /*
                首行缩进
                em 缩进几个字符
                px 缩进像素
            */
            text-indent: 2em;
            /*
                行高
            */
            line-height: 30px;
        }
        h2{
            /*
                水平对齐方式
                left 左
                right  右
                center 中心
            */
            text-align: center;
        }
    </style>
</head>
<body>
<h2>背影</h2>
<p>
    我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。
    到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路!”
</p>
<p>
    回家变卖典质，父亲还了亏空;又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
    到南京时，有朋友约去游逛，勾留了一日;第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。
    但他终于不放心，怕茶房不妥帖;颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去;他只说，“不要紧，他们去不好!”
</p>



</body>
</html>

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        a{
            font-size: 30px;
        }
        /*未单击访问时超链接样式*/
        a:link{
            color: #FF0000;
        }
        /*单击访问后超链接样式*/
        a:visited{
            color: #FAA53B;
        }
        /*鼠标悬浮其上的超链接样式*/
        a:hover{
            color: #0D7114;
        }
        /*鼠标单击未释放的超链接样式*/
        a:active{
            color: darkorchid;
        }
    </style>
</head>
<body>
<a href="#">百度</a>

</body>
</html>

列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul li {
            /*和默认的一样，小黑点*/
            /*list-style-type: disc;*/
            /*空心小圆点*/
            /*list-style-type: circle;*/
            /*取消前面的远点*/
            /*list-style-type: none;*/
            /*变为数字*/
            list-style-type: decimal;
            /*list-style和list-style-type一样*/

        }
    </style>
</head>
<body>
<ul>
    <li>西游记</li>
    <li>红楼梦</li>
    <li>水浒传</li>
    <li>三国演义</li>
</ul>

</body>
</html>

去除小黑点

li {
	list-style:none;
}

网页背景

  • 背景颜色
    background-color
  • 背景图片
    background-image:url(图片路径);
    -背景重复方式（设置图片）
    background-repeat
    repeat：沿水平和垂直两个方向平铺
    no-repeat：不平铺，即只显示一次
    repeat-x：只沿水平方向平铺
    repeat-y：只沿垂直方向平铺
  • 背景定位
    background-position属性
    Xpos Ypos 单位：px，Xpos表示水平位置，Ypos表示垂直位置
    X% Y% 使用百分比表示背景的位置
    X、Y方向关键词 水平方向的关键词：left、center、right 垂直方向的关键词：top、center、bottombackground属性
    -背景属性
    background属性
    background:#C00 url(…/image/arrow-down.gif) 205px 10px no-repeat;
    顺序：背景颜色 背景图片 背景定位 背景不重复

边框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*上边框颜色*/
            /*border-top-color: green;*/
            /*右边框颜色*/
            /*border-right-color: blue;*/
            /*下边框颜色*/
            /*border-bottom-color: orange;*/
            /*左边框颜色*/
            /*border-left-color: #9D9D9D;*/
            /*可以设置1/2/3/4颜色*/
            border-color: orange  green;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

边框粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
        }
        div{
            /*边框粗细*/
            /*border-width: 5px;*/
            /*上边框粗细*/
           /* border-top-width: 20px;*/
            /*下边框粗细*/
            /*border-bottom-width: 5px;*/
            /*右边框*/
            /*border-right-width: 1px;*/
            /*左边框*/
            /*border-left-width: 2px;*/
            /*细*/
            border-width: thin;
            /*粗*/
            border-width: thick;
            /*中等*/
            border-width: medium;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

边框样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
        }
        div{
            /*边框样式*/
            /*无边框*/
            /*border-style: none;*/
            /*隐藏边框*/
            /*border-style: hidden;*/
            /*虚线*/
            border-style: dashed;
            /*点线*/
            border-style: dotted;
            /*实线*/
            border-style: solid;
            /*双线*/
            border-style: double;
            /*
                上下左右
                 border-top-style: ;
                 border-bottom-style: ;
                 border-left-style: ;
                `border-right-style: ;
            */



        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

border简写：边框粗细 边框样式 边框颜色
border:1px solid #3a6587;

外边距

  • margin
    margin-top 上边距
    margin-right 右边距
    margin-bottom 下边距
    margin-left 左边距
    margin:0px auto; 居中对齐

内边距

  • padding
    padding-left 左边距
    padding-right 右边距
    padding-top 上边距
    padding-bottom 下边距
    padding 内边距简写，顺序为上 右 下 左

圆角边框

border-radius: 20px 10px 50px 30px;
顺时针，角度

float 浮动

取值：
left：元素向左浮动；
right：元素向右浮动；
none：默认值，元素不浮动；
inherit：从父元素继承float属性；
设置浮动可以将元素设置相邻
clear可以清除浮动

GQK11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS 样式优先级
08-04 2万+
什么是CSS优先级？
CSS样式
cn_luan的博客
12-20 2517
一、CSS 样式 1、内部样式表（内嵌样式表） 是写到html页面内部，是将所有css代码抽出，单独放到一个<style>标签中 <style> div { color:red; font-size:12px; } </style> style标签理论上可以放在html文档任何地方，但一般会放文档的head标签中 这种方式可以方便控制当前这个页面中的元素样式设置 代码结构清晰，但没有实现结构与样式完全分离 使用内部样式表设定css，通常也被称为嵌入式引入
css 样式面板,关于 CSS 样式面板
weixin_42363501的博客
08-03 3469
使用“CSS 样式”面板可以跟踪影响当前所选页面元素的 CSS 规则和属性(“当前”模式)，也可以跟踪文档可用的所有规则和属性(“所有”模式)。使用面板顶部的切换按钮可以在两种模式之间切换。使用“CSS 样式”面板还可以在“所有”和“当前”模式下修改 CSS 属性。有关“当前”模式和“所有”模式下“CSS 样式”面板的信息，请参阅下面两部分。当前模式下的 CSS 样式面板在“当前”模式下，“CSS...
CSS样式规则
Liyunhao_haoge的博客
10-03 6833
CSS样式规则 使用HTML时，需要遵从一定的规范。CSS也是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：选择器 {属性:属性值;属性:属性值;}如：h1 {color:red; font-size:20px;} 在上面的规则中: 1、选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。 2、属性和属性值以“键值对”的形式出现。 3...
CSS 样式书写规范,css样式书写规范
weixin_42535703的博客
08-04 4839
在工作当中css样式是非常重要的，但是咋样书写css样式更重要。一、css书写规范1、定位属性：position display float left top right bottom overflow clear z-index2、自身属性：width height padding border margin background3、文字样式：font-fami...
CSS样式表
全栈攻城狮JSON的博客
05-02 4502
目录 一、基础概念 二、CSS使用 1、行内样式 2、内部样式 3、外部样式 4、CSS语法 5、CSS注释 三、基本选择器 1、id选择器 2、class选择器 3、元素选择器/标签选择器 4、选择器优先级 5、样式表的优先级 四、CSS常用样式 1、color：字体颜色 2、width height：宽高 3、背景样式 4、文本样式 5、列表样式 6、边框样式 6、HTML&&CSS调试器 五、盒子模型 1、盒子的宽高 2、设置宽度=.
常用CSS样式
qq_51593012的博客
07-19 3546
CSS(层叠样式表)在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS样式穿透方法
MDCG99的博客
08-05 3144
CSS样式穿透通常在使用组件库或第三方组件时遇到，由于组件库封装了组件的样式，难以直接修改组件内部的样式。都是Vue特定的选择器，如果项目使用了CSS预处理器（如Sass、Less等），需要在选择器前面加上。是它的现代替代方案。在使用它们时，可以通过选择器深入到组件的子组件中，并覆盖它们的样式。伪选择器（Vue 2.6.0+）：为了替代过时的。是一种过时的样式穿透选择器，而。选择器，Vue引入了。
CSS常用样式
热门推荐
weixin_53988377的博客
07-24 1万+
CSS常用属性集合
CSS样式穿透
weixin_44293690的博客
08-02 4140
CSS样式穿透
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
Qt css样式大全+详细书签pdf.zip
12-05
本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料，旨在帮助开发者深入理解和掌握Qt界面美化技术。 首先，"Qt css样式大全(整理版） - wang13342322203的博客 - CSDN博客.html"是王...
DW在html中插入css样式方法
09-24
Dreamweaver（DW）是一款常用的网页设计工具，它提供了方便的CSS样式插入功能，帮助设计师高效地管理网页样式。下面我们将详细介绍如何在HTML中使用DW插入CSS样式。 首先，我们需要创建一个新的CSS文件。启动...
CSS样式初始化commonInitialize.css
01-18
CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先，我们来理解...
网页中应用CSS样式的多种形式总结
09-22
本文将详细探讨CSS样式的四种主要应用形式：内联样式、内部样式、外部样式以及导入外部样式表。 1. **内联样式**： 内联样式是最直接的方式，它将CSS代码直接放置在HTML元素的`style`属性中。这种做法适用于快速为...
CSS：mix-blend-mode属性（设置元素的混合模式）
最新发布
m0_65029152的博客
07-24 944
本文主要记录CSS中，mix-blend-mode属性的相关内容，并实现页面中的文字适配背景效果；
CSS学习笔记
ngczx的博客
07-23 454
CSS学习笔记
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1255
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效
uu0216的博客
07-24 567
这是一个系列的按钮，它们具有共同的特点：底层按钮层，具有一个彩色的渐变边框，上层是依据hover效果需要，可以是渐变，可以时白色。鼠标hover效果都是一样的：背景色位移或变化。本篇文章仅介绍第三个按钮的做法，其他的做法，我会写在源文件里，但不写在本篇里。
css样式xmind
12-19
CSS 样式在 XMind 中非常重要，它可以帮助用户定制思维导图的外观和风格，让导图更加美观和易于阅读。 首先，用户可以通过 CSS 样式来调整节点的颜色、边框和字体样式，使得节点与整个导图的主题相呼应。这样可以让导图更加统一和美观。 其次，CSS 样式还可以调整连接线的样式和颜色，例如可以设置不同类型的连接线（直线、曲线、虚线等），或者改变连接线的颜色和粗细，从而更加清晰地显示不同节点之间的关联关系。 另外，通过 CSS 样式，用户还可以调整整个导图的背景颜色和图片，甚至可以自定义一些特殊效果，比如添加阴影、边框等，以增强导图的视觉吸引力。 最后，借助 CSS 样式，用户还可以在导图中添加动画效果，比如节点的渐变、缩放、旋转等，从而让导图更加生动、有趣。 总之，CSS 样式在 XMind 中发挥着非常重要的作用，它不仅可以帮助用户定制个性化的导图风格，还可以增强导图的表现力和吸引力，让人们更加愿意去阅读和理解导图中的内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值