初级CSS设计

最新推荐文章于 2022-08-14 22:54:08 发布
最新推荐文章于 2022-08-14 22:54:08 发布
阅读量138 收藏
点赞数
分类专栏： # CSS学习笔记 文章标签： 创建CSS 使用元素内嵌样式表 使用文档内嵌样式表 使用外部样式表 简单的CSS层叠顺序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41104353/article/details/79440005
版权

一共有三种方法创建CSS

元素内嵌样式表

<a style='font-size: 40px'; color='#ff0000';>元素内嵌样式表</a>

<!DOCTYPE HTML>  
<html>  
<body>  
  
<a>CSS简介</a>  
<br />  
<a style="font-size: 40px; color=#ffffff">CSS简介</a>
  
</body>  
</html>



使用文档内嵌样式表

<style type='text/css'>
  a {
       font-size: 40px;
       color: #ff0000;
   }
</style>


文档内嵌样式表一般放在<head>里

<html>  
  
<head>  
<style type="text/css">  
h1 {color: red}
</style>  
</head>  
  
<body>  
<h1>header 1</h1>
</body>  
  
</html>



使用外部样式表

外部样式表需要创建一个新的css文档，引入至HTML文档方式如下：

<link rel='stylesheet' type='text/css' href='CSS文档名.css'>

CSS文档的内容格式：

  a {
       font-size: 40px;
       color: #ff0000;
   }


使用<link>标签链接到一个外部样式表

<html>

<head>
<link rel="stylesheet" type="text/css" href="http://www.w3school.com.cn/html/csstest1.css" >
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>

</html>


三者区别

如果想要设置多个<a>标签，并且想让他们的样式都一模一样的时候，使用文档内嵌样式表或者外部样式表更简洁

外部样式表可以控制多个HTML文件的样式，一般用来设置字体



层叠样式表层叠的含义

当同一个HTML元素被不止一个样式定义时，就涉及到层叠。

一般而言，所有的样式会根据以下规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。

1.浏览器缺省设置

2.外部样式表

3.内部样式表（位于<head>标签内部）

4.内联样式（在HTML元素内部）

因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着他将优先于以下的样式声明：<head>标签中的样式声明，外部样式表的样式声明，或者浏览器中的样式声明（缺省值）。

级别一般有：4>3>2>1


在到处之间找我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中找点buttun的样式css设计。
李小由的菜鸡博客
11-04 324
我从别人的网站找的，觉得不错，可以学习学习。 http://www.bootcss.com/p/buttons/ 其中有不少值得学习的点。
CSS文字文本样式（font字体、css外观属性）
IT之一小佬的博客
01-10 6587
1. font字体 1.1. font-size:大小 作用：font-size属性用于设置字号。 p { font-size:20px; } 单位： 可以使用相对长度单位，也可以使用绝对长度单位。 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。 注意： 文字大小基本就用px了，其他单位很少使用 谷歌浏览器默认的文字大小为16px 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。...
css基本样式之字体样式
SSS4362的博客
06-24 1021
本文主要将了css基本样式中的字体样式,其中字体样式主要包含尺寸、粗细、倾斜度、风格这四种
HTML select标签 居中 改字体大小 JS设置默认选中值
可可芯意的博客
12-21 3300
一、居中显示 居中显示，需要增加 div标签 <div align="center"> </div> 二、select整体大小 <style type ='text/css'> select{font-size:40px;} </style> 三、其他字体的大小 加上style="font-size:40px"即可 四、整体代码 测试地址：https://www.w3cschool.cn/htmltags/tag-select.html <!
2、CSS基础
最新发布
qq_37917691的博客
08-14 2069
•STYLE元素应插入文档的元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响}}
静态网页设计期末课程设计HTML5+css3(初级)
03-09
资源名称:静态网页设计期末课程设计 使用/学习目标：完成期末课设 应用场景：HTM+css相互结合，完美搭建一个静态的网页 特点：使用简单 适用人群：学习静态网页之后的初学者 使用/学习说明：在学习的过程中要结合...
CSS学习资料,初级
02-15
本资源包“CSS学习资料,初级”专为初学者设计，旨在提供一个易于理解的学习平台，帮助初学者快速掌握CSS的基础知识。 **一、CSS简介** CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如...
CSS-Lesson:初级CSS代码
05-03
总的来说，初级CSS代码的学习涉及了选择器、声明、引入方式、盒模型、定位、响应式设计以及单位等多个方面。通过不断地练习和实践，你将能够熟练运用CSS来打造美观、功能丰富的网页。在`CSS-Lesson-main`这个文件中...
collegiateCribs:初级设计团队 61
06-09
collegiateCribs：初级设计团队 61 要运行，请确保您有： 安装了 nodejs 和 npm 在端口 27017 上运行的 mongodb 跑步： 安装 凉亭安装 启动 本地主机:8080
免费的CSS初级教程下载
03-28
CSS初级教程，适合初学者使用和参考，帮你设计出更加漂亮的网页
CSS——字体（font-family,font-style，font-size注意要点）
soyanzhong的博客
12-04 9362
font-family——设置字体（宋体、黑体之类的）font-style——设置字体风格（也就是正常显示还是斜着显示） normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示 通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。font-size：设置字体大小。可以使用px单位也可以使用em。 如果要避免在 In
css嵌入样式元素,css伪元素怎么用在内嵌样式？
weixin_30745053的博客
08-04 2251
css伪元素可以直接在内嵌样式中使用，使用语法为：<style>选择器:pseudo-element{属性名:属性值;}</style>。然后直接通过选择器即可使用伪元素。伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配...
css内嵌样式
weixin_42378409的博客
11-27 213
Document 新闻 网页 贴吧 知道 音乐 图片 视频 地图 百科 文库 hao123 | 更多>> 百度地图带你吃喝玩乐，全心全意为人民服务 把百度设为主页 安装百度卫士 加入百度 搜索风云榜 ...
内嵌式CSS样式＜style＞
此地无银三百两
03-08 3805
<style>定义和用法 <style>标签用于为HTML文档定义样式信息，在<style>元素里，可以指定HTML元素在浏览器里的呈现方式。 必选属性type用于指明<style>元素的内容，目前仅支持“text/css”一个值。 <style>标签应放在<head>里，<tytle>之后。 定义好CSS样式后，可以重复使用，让网页制作更高校快捷，代码重用性更高。 属性 样例代码： <%@ page langua
CSS三大样式——内嵌样式和外部样式
weixin_38945490的博客
03-14 1864
内嵌样式： ①在网页中内嵌sytle标签去写样式 ②在内嵌样式中要先匹配到对应元素 才能写css样式 匹配到元素样式写法规则是： 匹配器{ //样式 } ③ 如何匹配元素： 使用元素选择器来匹配元素 1.*号匹配器 匹配网页里面所有的元素 * { border: 1px solid red; } <button>按钮</button> 2.元素选择器 根据元素的名称来匹配元素 匹配整个网页里面所有这
CSS样式中内联、嵌入、外部样式
热门推荐
古月风苑
05-28 1万+
内联样式 内联样式是使用style属性添加到元素的样式。 This is a paragraph. 嵌入样式 当单个文档需要特殊的样式时，就应该使用嵌入样式表。你可以使用 标签在文档头部定义嵌入样式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gi
css引入样式-行内样式、内嵌样式和外链样式
der_alone的博客
09-09 4028
css初识及引入样式 概念：css通常称为css样式表或层叠样式表 作用： - 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式 - css以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 引入css样式表的三种方式： 1）行内式（内联样式） 概念：称行内样式、行间样式，是通过标签的style属性来设置元素的样式 基础语法<标签名 style="属
html——样式引用之内嵌式
Cherry的博客
05-04 9416
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="color:red;font-size:20px;font-fa...
CSS 内嵌样式
ivenqin的博客
08-31 4551
前面一节我们讲了行内样式，但是行内样式的缺点就是样式不能重用。例如当有好多个 <p> 标签，我们希望所有的 <p> 标签的样式都一致，那么需要在每个标签中都写一遍，这么会很麻烦，也会增加很多代码。 那么为了解决这个问题，本节我们学一下内嵌样式，也可以叫做内部样式。 什么是内嵌样式 内嵌样式就是将 CSS 代码写在 HTML 页面中的 <head> 标签中的 <style> 标签内。因为它与 HTML 内容位于同一个文件中，所以叫做内嵌样式表。 示例： 例如下面
CSS设计指南(第3版):初级到高级设计师必备
《CSS设计指南（第3版）》是一本由英国作者Charles Wyke-Smith所著的专业设计书籍，针对的是CSS的初、中级读者。该书作为"图灵程序设计丛书"的一员，提供了一套全面且深入的CSS学习资源。全书共分为8个章节，内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值