精华内容
下载资源
问答
  • htmlcss文字加粗方法
    万次阅读 多人点赞
    2019-09-18 05:35:22

    一般来说前端加粗字体的方法有两种,一个是html标签加粗的方法,另一个是css加粗字体的方法,还有一个是字体加粗方法。前两个是我们最常用的方法,后一个感觉有点非主流的方法,也不知道我是怎么想到这种方法的,有点为自己的智商感到悲伤,下面给大家详细的介绍一下。

    一、标签方法加粗文字

    1、h(1~6标签)书写方式

    <h1>h1标签 -> CGLweb前端</h1>
    <h2>h2标签 -> CGLweb前端</h2>
    <h3>h3标签 -> CGLweb前端</h3>
    <h4>h4标签 -> CGLweb前端</h4>
    <h5>h5标签 -> CGLweb前端</h5>
    <h6>h6标签 -> CGLweb前端</h6>
    2、页面效果

    h1标签 -> CGLweb前端
    h2标签 -> CGLweb前端
    h3标签 -> CGLweb前端
    h4标签 -> CGLweb前端
    h5标签 -> CGLweb前端
    h6标签 -> CGLweb前端

    2、strong标签

    <strong>strong标签 -> CGLweb前端</strong>(www.gendan5.com)
    strong标签 -> CGLweb前端

    3、b标签

    <b>b标签 -> CGLweb前端</b>
    b标签 -> CGLweb前端

    这其中我们一般是使用strong来加粗的,原因如下,b标签现在已经是废弃标签,所以我们就不用了。

    h标签一般用在SEO优化的,所以除非是列表、二级菜单、详情页标题除外不建议使用。

    因为有些浏览器对h标签定义的文字大小不一样,所以我们为了每一个浏览器上文字大小一样,会设置一样的fon-size。

    二、CSS方法加粗文字

    css有个文字加粗的属性

    font-weight:normal|bold|bolder|lighter|inherit|

    1、normal:默认值。定义标准的字符。

    2、bold:定义粗体字符。

    3、bolder:定义更粗的字符。

    4、lighter:定义更细的字符。

    5、数字:|100|200|300|400|500|600|700|800|900定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。

    6、inherit:规定从父元素继承字体的粗细。

    1、css书写方式为一下:

    <style type="text/css">
    .p_text_1{ font-weight:normal;}
    .p_text_2{ font-weight:bold;}
    .p_text_3{ font-weight:bolder;}
    .p_text_4{ font-weight:lighter;}
    .p_text_5{ font-weight:700;}
    .p_text_6{ font-weight:inherit;}
    </style>
    2、页面效果可以自己试一下

    其实感觉css加粗的各种数值和属性,以我24K合金眼睛来观察了一下,并没有什么区别,只有加粗和不加粗的区别而已,希望有知道的道友指点一二。

    二、字体加粗方法

    1、书写方式

    <p style="font-family:'楷体';">CGLweb前端 -> font-family:'楷体'</p>
    <p style="font-family:'黑体';">CGLweb前端 -> font-family:'黑体'</p>
    <p style="font-family:'Impact';">CGLweb前端 -> font-family:Impact</p>
    <p style="font-family:'仿宋';">CGLweb前端 -> font-family:'仿宋'</p>
    <p style="font-family:'微软雅黑';">CGLweb前端 -> font-family:'微软雅黑'</p>
    2、页面效果

    CGLweb前端 -> font-family:’楷体’

    CGLweb前端 -> font-family:’黑体’

    CGLweb前端 -> font-family:Impact

    CGLweb前端 -> font-family:’仿宋’

    CGLweb前端 -> font-family:’微软雅黑’

    这个方法在很久以前使用过,主要是用在英文会好点,咱们就看Impact这个字体就能知道加粗是多么的厉害了。

    汉字的话因为考虑到电脑上缺失字体的原因不建议使用,目前还没有在汉字上使用过。

    更多相关内容
  • css导入html中

    千次阅读 2021-09-27 10:56:28
    4.回到之前新建的html中,在<title><title>下方打出link 5.打完link后按下键盘中的tab键,便会如下图 6.点击浏览,找到保存css的文件夹 7.点击确定后便将css导入了 8.这便是导入的css了,...

    1.打开DW,新建一个html

    2.新建一个css

     

    3.将新建的css另存为在一个文件夹中
     
     

     

     

    4.回到之前新建的html中,在<title><title>下方打出link

     

    5.打完link后按下键盘中的tab键,便会如下图

     

    6.点击浏览,找到保存css的文件夹

     

    7.点击确定后便将css导入了

     

    8.这便是导入的css了,和红圈圈住的css为同一个,可将红圈css关掉

     

    9.
    ps:link+tab键为快捷方式,也可以直接打<link rel="stylesheet" href=" ">同样可以进行导入

    10.以上便是导入css方式
     

    展开全文
  • CSS样式嵌入html中的三种方式

    千次阅读 2021-09-20 22:08:58
    当我们写一个html静态页面的时候,发现所生成的排版或者效果非常的不好时,我们就可以使用CSS样式来美化所生成的html的控件,css样式的生效完全依赖于html文件,下面介绍如何将css样式嵌入到html中。 1.在每个标签...

            当我们写一个html静态页面的时候,发现所生成的排版或者效果非常的不好时,我们就可以使用CSS样式来美化所生成的html的控件,css样式的生效完全依赖于html文件,下面介绍如何将css样式嵌入到html中。   


          下面写一个输入框的html文件。

    <!DOCTYPE html>
    <html>
    
    <head>
        <title> test </title>
    </head>
    
    <body>
    
    
        <input type="text" />
    </body>
    
    
    
    </html>

             在网页中运行就只有一个在最左上角的输入框。

         

    目录

    1.在标签中写入style属性

    2. 将样式放置为style标签中

    3.将style标签放置 .css文件内


     下面我们通过不同形式的CSS样式将其简单的变样。

    1.在标签中写入style属性

            在每一个标签里可以写入类似于  style = "  "的形式在该标签里写入CSS样式,该样式只作用于该标签。

            就像上述例子,我们发现输入框输入的字体颜色是黑色,我们将其修改为红色,将输入框适当的居中显示。

            

    <!DOCTYPE html>
    <html>
    
    <head>
        <title> test </title>
    </head>
    
    <body>
    
    
        <input type="text" style="border:2px solid black; color:red ; position:absolute ; left:30%;top:30%; " />
    </body>
    
    
    
    </html>

     就会呈现出这样的效果。

     2. 将样式放置为style标签中

            通过在每一个标签写入style = "  "可以将样式写入到该标签中,当html文件有多个重复的标签都需要该样式的时候,我们就会发现在每一个标签中写入该样式太麻烦。这个时候我们就可以在html文件中写入style标签,在style标签写CSS样式。

            另外在style标签中写入css样式有三种模式。我们需要指定该样式是写在哪里的。其写在哪里的就可以包含标签,id 属性, class属性。

             

            标签选择器

            通过写入某标签样式的格式:

            某标签名{

                    样式

             } 

             通过在css样式中写入标签选择器可以统一改变指定标签的样式。

              id选择器

            通过写入id属性样式的格式:

            #id名{

                    样式

            }

            class选择器

            通过写入class属性样式的格式:

            .class名{

                    样式

            } 

            在html中,标签中id属性是唯一,也就是说但某一个标签用了id = "1" 时,那么后续的标签则不可以使用id= "1"来表示。class属性则不唯一,可以多个标签使用同一个class值。这一性质也说明了id选择器和class选择器的区别。id选择器差不多只能表示一个具体的标签样式,class选择器则可以表示多个相同class属性值的标签。两个选择器对于标签选择器来说的话就显得更加灵活。

            举个例子,我们在网页中输入4个字母A。

    <!DOCTYPE html>
    <html>
    
    <head>
        <title> test1 </title>
    </head>
    
    <style type="text/css">
        div {
            color: red;  
        }
        
        #ida {
            color: blue; 
        }
        
        .classa1 {
            color: green;
        }
    </style>
    
    <body>
        <div> A </div>
        <div id="ida"> A </div>
        <div class="classa1"> A </div>
        <div class="classa1">A</div>
    </body>
    
    
    </html>

            得出的效果图为:

            

          另外其中的 

            *{

            }   可以表示全部标签的样式

        

                 在<style> </style>内的注释是由/*注释内容*/  来注释的。

    3.将style标签放置 .css文件内

            我们发现通过style标签 来写入css样式已经相当不错了。但是,假如我们在过一段时间后,需要对其style标签中的样式进行修改,就需要修改html文档,并且假如html文档足够的多,或许这是一件麻烦事。我们又发现一些样式在n多个html文件中都通用,假如每一个html文件中都写入了style标签css样式的话,显然很麻烦。对此我们就可以采用将style标签封装到另一个后缀为.css文件中。

            我们在上述html文件的同路径下,创建一个名为css文件夹,在css文件夹中创建一个test.css文件,text.css就是写入css样式的,对此我们可以将上述的style标签中的css样式原封不动的放到text.css中。

            当发现css样式text.css和html文件test.html相互分离开来了,想要在html文件中能够使用到text.css样式则需要让其两个又联系。我们可以在html文件的head标签内写入link标签,让.css文件连接到html文件中。

              <link href="css/test.css" rel="stylesheet" type="text/css" />

            只需要修改href属性里面的值就可以来将.css文件连接到html文件中,其href属性的值就就是.css的路径。

            我们对上述输入4个字母A的html进行修改。

            

    <!DOCTYPE html>
    <html>
    
    <head>
        <title> test </title>
        <link href="css/test.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body>
    
    
        <div> A </div>
        <div id="ida"> A </div>
        <div class="classa1"> A </div>
        <div class="classa1">A</div>
    
    
    
    
    </body>
    
    </html>

            在test.css中添加:

            

    div {
        color: red;
    }
    
    #ida {
        color: blue;
    }
    
    .classa1 {
        color: green;
    }

            运行html文件就可以得出一模一样的样式来。

            

            此外,CSS样式非常之多,这里不一一例举。

    展开全文
  • 如何将CSS链接到HTML

    千次阅读 2021-07-15 01:38:37
    如何将CSS链接HTML在HTML中,我们可以通过以下三种不同的方法轻松地将样式表链接到Html文档:使用内联样式使用嵌入样式或内部样式使用外部样式使用内联样式这是将CSS样式添加HTML文档或代码中的最简单方法。...

    如何将CSS链接到HTML

    在HTML中,我们可以通过以下三种不同的方法轻松地将样式表链接到Html文档:

    使用内联样式

    使用嵌入样式或内部样式

    使用外部样式

    使用内联样式

    这是将CSS样式添加到HTML文档或代码中的最简单方法。但是我们无法重用此方法,因此可重用性是此方法的缺点。如果要使用内联样式将CSS添加到HTML文档中,则必须遵循以下步骤:

    步骤1:首先,我们必须在任何文本编辑器中键入HTML代码,或在文本编辑器中打开要使用Inline Style链接CSS的现有HTML文件。

    步骤2:现在,我们必须在要使用CSS的文本的开头使用style属性。因此,我们必须在特定标记中键入style属性,以便使用内联样式将CSS链接到Html,如以下块所示:

    步骤3:现在,我们必须在style属性中提供该属性,如以下块所示:

    步骤4:现在,保存HTML代码,然后运行它。在浏览器中成功执行代码后,它将显示输出。下面的屏幕截图显示了上述HTML代码的输出:

    how-to-link-css-to-html.png

    使用内部StyleSheet

    仅影响嵌入它们的HTML文档的那些工作表称为内部样式表。这些样式表是在开始和结束之间定义的

    标签。

    如果我们想使用“内部样式表”将CSS添加到我们的Html文档中,那么我们必须遵循以下步骤:

    第1步:首先,我们必须在任何文本编辑器中键入Html代码,或在文本编辑器中打开要使用“内部样式表”链接CSS的现有Html文件。

    第2步:现在,我们必须将样式标签放置在

    标签,就在标签。我们在以下方框中描述了此步骤: html>

    步骤3:现在,我们必须使用名称为“ type”的样式标签的属性。因此,我们必须始终启动

    步骤4:现在,我们必须在相同的HTML页面中添加要在文本中使用的元素。我们可以将这些元素添加到在

    标签。

    步骤5:并且,最后保存HTML文件并运行它。当浏览器成功执行代码后,它将显示输出。下面的屏幕截图提供了上述HTML代码的输出:

    how-to-link-css-to-html2.png

    使用外部样式

    这些仅包含CSS格式或代码的文件称为外部样式表文件或CSS文件。这些文件的扩展名必须以.css扩展名结尾。这些文件与HTML文件不同,可以通过以下方式轻松地将它们包含在HTML文件中:标签。

    如果我们想使用外部样式表将CSS添加到Html文档中,则必须遵循以下步骤:

    步骤1:首先,我们必须在任何文本编辑器中键入Html代码,或在要链接CSS文件的文本编辑器中打开现有的Html文件:

    步骤2:现在,我们必须创建CSS文件。因此,打开文本编辑器,然后在文件中键入CSS代码。

    步骤3:然后,保存扩展名为.css的文件。

    how-to-link-css-to-html3.png

    第4步:再次,进入HTML文件。然后,我们必须将光标放在

    标签,就在标签。然后,键入及其属性和值。我们在以下块中对其进行了描述: html>

    步骤5:现在,我们必须将HTML文件保存在保存CSS文件的位置或目录中。并且,然后在浏览器中运行HTML文件。上面的html代码的输出显示在以下屏幕截图中:

    how-to-link-css-to-html4.png

    相关文章:HTML5-地理位置 HTML5-地理位置 HTML5位置 HTML5 Geolocation API使您可以与自己喜欢的网站共享߮......

    HTML 拖放事件 HTML 拖放事件 HTML拖放(DnD)是HTML5的功能。它是一个功能强大的用户界面概念,可用于在鼠标的帮助下复制,重新排序和删除项目。您可以在元素上按住鼠标按钮,然后将其拖动到另一个位置。如果要将元素放在此处,只需释放鼠标按钮。 如果要实现传统HTML4中的拖放功能,则必须使用复杂的JavaScript编程或其他JavaScript框架(如jQuery等)。 拖放事件功能 Event Des......

    HTML dir标签 的HTML

  • 标签,以及目录列表默认情况下以项目符号形式呈现。 注意:请勿使用HTML
    • 标签和CSS属性来代替。 句法...

    HTML 隐藏元素 HTML隐藏元素 您可以使用元素隐藏的布尔属性来隐藏元素。在HTML文件中指定隐藏属性时,浏览器将不会显示该属性指定的元素。 句法 Any statement or...

    44个HTML面试问题| HTML5面试问题 HTML面试问题 下面列出了最常见的HTML面试问题和HTML5面试问题及答案。 HTML5面试问题 1)什么是HTML? HTML代表超文本标记语言。它是万维网的一种语言。它是一种标准的文本格式设置语言,用于在Web上创建和显示页面。它使文本更具交互性和动态性。它可以将文本转换为图像,表格,链接。更多细节。 2)什么是标签? HTML标签由三部分组成:开始标签,内容和结束标签。一些标签是未关闭的......

    HTML code标签 HTML 标签 HTML tag标签用于表示计算机代码。它是定义一段计算机代码的短语标签。默认情况下,它以浏览器默认的monospace字体(也称为固定宽度字体)显示。. HTML 标签列表 Tag Description displays...

    HTML picture标签 HTML标签 HTML标签用于响应式网页设计,我们需要根据其视口,高度,宽度,方向和像素密度加载不同的图像。 标签包含一个或多个元素和一个元素。 根据视口,将从不同的位置加载匹配的图像标签,如果没有来源包含匹配的图片,则默认图片出现......

    HTML 日期(Date) HTML日期 日期是一个日期的type属性的值元件。它创建一个日历,允许用户选择日期。结果值包括日,月和年。 句法 示例1:下面的示例描述如何在中使用日期标签:

    ...
  • 展开全文
  • CSS3+HTML5+从入门精通

    热门讨论 2014-07-03 12:44:13
    CSS3+HTML5+从入门精通 CSS3+HTML5+从入门精通》-中文学习教程
  • 七套最新div+css中文html模板免费下载

    千次下载 热门讨论 2013-03-27 13:48:54
    七套最新div+css中文html模板免费下载。现在网上到处都是div+css模板,但是真正能用的到底有几个?你自己说! 无非是一些英文版的,但是国外的模板理念和国内的很不一样,英文的讲究框架合理,韩国的讲究视觉美,...
  • HTML5+CSS3 精美登陆界面源码

    千次下载 热门讨论 2016-01-19 09:52:44
    3个很精美的登陆界面,全都是用HTML5+CSS3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的。
  • html+css实现简单分页页码效果

    热门讨论 2015-04-19 17:59:37
    html+css实现简单分页页码效果源码,尚且没有复杂的后台,给前端新手学习之用
  • Html+Css+Javascript从入门精通.pdf

    千次下载 热门讨论 2011-09-27 21:40:24
    Html+Css+Javascript从入门精通.pdfHtml+Css+Javascript从入门精通.pdf
  • CSS 引入 HTML 的三种方式

    千次阅读 2020-12-21 18:08:40
    总结 CSS 引入 HTML 的三种方式
  • HTML+CSS网页设计与布局从入门精通

    千次下载 热门讨论 2013-03-18 19:28:53
    HTML+CSS网页设计与布局从入门精通》紧密围绕网页设计师在制作网页过程的实际需要和应该掌握的技术,全面介绍了使用HTMLCSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门精通》...
  • css如何空格

    千次阅读 2021-08-05 00:21:22
    css中,可以利用伪元素“:before”和“:after”来在元素内容前或元素内容后添加空格,语法格式“元素:before {content: " ";}”或“元素:after {content: " ";}”。本教程操作环境:windows7系统、CSS3&&...
  • css怎么字体加粗加大

    万次阅读 2021-08-04 06:05:01
    1. css中字体加粗怎么设置为最粗字体加粗font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接...
  • HTML_CSS_JavaScript网页制作从入门精通 刘西杰 人民邮电出版社 上次发成两个压缩分卷是因为上传文件大小的权限不够,这次升级了直接原版发出来,直接解压即可 另外我发现自己转换出来的pdf格式页面效果不好,...
  • css怎么给文字边框

    千次阅读 2021-06-13 12:52:02
    css给文字边框的方法:首先创建一个HTML示例文件;...css给文字边框:CSS能够对网页元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力...
  • HTML+CSS经典案例

    热门讨论 2012-09-12 22:53:45
    想学好这块的朋友,可以去看看,很适合初学者,希望对你 有所帮助
  • 疯狂html5+css3+javascript完整版

    热门讨论 2013-12-10 17:26:36
    (1) 本书很多HTML 5、CSS 3代码必须在高版本的浏览器才能看到效果。建议读者安装Opera 11.60、Firefox 10.0、Chrome 17.0以上版本的浏览器。 (2) 本书少量程序需要使用Java编译、运行,建议安装jdk-7u3-...
  • 基于html5+css3实现的精美聊天界面demo

    千次下载 热门讨论 2015-07-27 14:53:31
    基于HTML5+css3实现的两人即时通讯聊天界面,界面风格相当漂亮,可直接使用,也可简单修改为自己想要的样式,仅供大家参考。
  • 既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇文章将给大家来介绍关于html引入css文件的四种方法,下面我们就来看看具体的内容。 1、html引入css文件之直接在div中使用css样式制作...
  • HTMLCSS中如何设置中文字体

    万次阅读 多人点赞 2018-01-31 21:27:04
    你是不是也遇到过这个问题:在HTMLCSS中怎么设置字体为宋体或楷体或黑体等等中文字体呢?下面就来解决这个问题。  用font-family:字体英文名 即可。  fon标记是HTML里最常用的文字格式控制标记,通过改变...
  • css3.0+html5中文api(chm格式)

    千次下载 热门讨论 2011-04-25 09:05:49
    让你得心应手的进行网页布局和设计(css3.0+html5中文api)
  • HTML5+CSS3多彩进度条是一款CSS3进度条,可以用在投票结果分析,效果也非常不错。
  • 用如下代码在HTML中设定CSS样式,背景图片无法显示。 <!-- HTML代码 --> <style type="text/css"> body { background-image: url(/image/image1.JPG); background-repeat: repeat-y; backgro
  • 【福利】Head First HTMLcss第二版中文PDF书籍

    千次阅读 多人点赞 2020-08-25 10:33:31
    小黄最近了解了一下《Head First HTMLcss》这本书,感觉不错。但是在寻找这本书的PDF版真的挺费劲的,所以今天免费给大家福利。帮大家这本书的PDF直接赠送给大家。 网盘链接在最后, 需要的可以直接跳过目录图片...
  • css图片下边怎么

    千次阅读 2021-06-12 00:40:07
    css图片下边怎么字比较简单的做法就是,将他们放置在一个盒子内,让文字跟图片居中,只需要利用css样式的text-align属性即可,并且各个浏览器都会正常显示,代码如下: 这里是居中的文字.box{width:300px;...
  • HTML+CSS实现搜索框

    千次阅读 多人点赞 2021-02-27 21:49:33
    HTML+CSS实现搜索框 首先: <div class="box"> <input type="text" class="input" placeholder="请输入商品"> <!--placeholder是文本框的提示文字--> <input type="button" value="搜索" ...
  • HTML+CSS登陆界面实例

    万次阅读 多人点赞 2020-02-02 10:44:32
    登录界面截图 项目代码仓库地址 项目的代码放在了github的代码仓库当中:点我 项目访问地址 将登录界面项目部署在了github上面:点我 ...项目基本框架html代码解析 大写的Login英文字母采用标题...
  • HTML/CSS 常见面试题汇总

    万次阅读 多人点赞 2020-04-06 17:51:08
    alt属性是为了给那些不能看到你文档图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。 这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉...
  • CSS中常用的 reset.css文件

    千次下载 2015-05-05 14:39:33
    CSS中常用的 reset.css文件,用于重置html默认样式
  • HTML网页设计制作大作业(div+css

    万次阅读 多人点赞 2020-11-25 16:19:36
    老师要求的十几个页面20几张图片以及一些跳转,使用div+css布局也基本上都有了。然后代码也有注释。也能够容易看得懂 部分代码 偷个懒,就用notepad打开。不用H-build打开了。哈哈哈 另外有同学要是需要源码的话...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,857,286
精华内容 742,914
关键字:

怎么把css加到html中