HTML-学习笔记(样式)

HTML 样式

style属性用于改变HTML元素的样式。

<p style="font-family: arial; color: red;">字体是arial,字体颜色是红色</p>
<p style="font-size: 30px;">这行文字的字体大小是30px</p>

HTML 的 style 属性

style 属性的作用:

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。

HTML引入样式的方式

上面只是html引入样式一种方式。其实html引入样式有三种方式。

1.外部样式表 通过<link>标签引入

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

2.内部样式表 通常写在<head>标签中

<style type="text/css">
    p {
        color: red;
        text-align: center;
        font-size: 15px;
    }
</style>

3.内联样式表 通常写在相对应地元素标签的起始标签內

<p style="font-family: arial; color: red;">字体是arial,字体颜色是红色</p>
<p style="font-size: 30px;">这行文字的字体大小是30px</p>

三种方式中內联样式的优先级最高 外部样式表的优先级最低。最常用的是外部样式表,这是另一门学科CSS会在后面的博客中详细讲起。

时间: 2024-11-05 10:10:08

HTML-学习笔记(样式)的相关文章

十三、Android学习笔记_Andorid控件样式汇总

<!-- 设置activity为透明 --> <style name="translucent"> <item name="android:windowBackground">@color/translucent</item> <item name="android:windowIsTranslucent">true</item> <item name="an

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <title>6.3css类和样式</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="scri

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框. 错误框的类名是.err,警告框的类名是.warn: <!DOCTYPE html> <html ng-app> <head> <title>6.2css类和样式</title> <

Android学习笔记_75_Andorid控件样式汇总

<!-- 设置activity为透明 --> <style name="translucent"> <item name="android:windowBackground">@color/translucent</item> <item name="android:windowIsTranslucent">true</item> <item name="an

ProgressBar学习笔记,自定义横向进度条的样式(包含ActionBar上面的进度条)

 点显示进度条后→   android:max="100" 进度条的最大值 android:progress  进度条已经完成的进度值 android:progressDrawable 已经完成的进度条轨道显示的Drawable对象 indeterminateDrawable   设置绘制不显示进度的进度条的Drawable对象 android:indeterminate 设置为true,进度条不精准显示进度 android:indeterminateDuration  设置不精准显示

微信小程序开发:学习笔记[3]——WXSS样式

微信小程序开发:学习笔记[3]--WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS与Web开发中的CSS类似.为了更适合小程序开发,WXSS对CSS做了一些补充以及修改. 文件组成 项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面. 页面样式:与app.json注册过的页面同名且位置同级的WXSS文件.比如注册了pages/rpx/index页

根据兄弟元素的数量来设置样式(CSS揭秘学习笔记)

CSS揭秘学习笔记 li.length == 4 li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { /* 当列表正好包含四项时,命中所有列表项 */ } li.length >= 4 li:first-child:nth-last-child(n+4), li:first-child:nth-last-child(n+4) ~ li { /* 当列表至少包含四项时,命中所有列表项 */ } li.l

.FBReaderJ学习笔记(四):SelectionPopup样式更改

这篇文章是在第二篇文章FBReaderJ学习笔记(二):PopWindow实现自定义阅读页菜单上继续更改Popup. 先贴出结构.TextSearchPopup跟SelectionPopup大同小异,所以这里只讲SelectionPopup. 首先更改ButtonsPopupPanel,修改addButton()方法. //selectionPopup的按钮,isText代表是否是文字按钮 protected void addButton(String actionId, boolean isC

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

建筑建模学习笔记1——AutoCAD平面建模

建筑建模学习笔记1--AutoCAD平面建模 楼宇自控项目上位机控制展示软件需要展示成3D效果图,最近在学习3D建模的相关知识.3D建筑物建模多数都是导入2D的CAD建筑图纸,在其基础上进行建模,这样作出的3D模型则会完全与实物相符.现在记录一些AutoCAD画图的命令. 1.划线命令 1)Line 快捷键是 L,工具栏图标 下面是划线的操作动画: 划线时我们看到线不仅有长度还有角度,在在多数情况下画直角的线多一些,AutoCAD提供了正交按钮,在选中此项后,我们画的线与线间的夹角永远都是90度