css的引入方式

最新推荐文章于 2021-02-03 17:07:33 发布
最新推荐文章于 2021-02-03 17:07:33 发布
阅读量92 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44721518/article/details/107772697
版权

1.行间样式

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <div style="
	  width:100px;
	  height:100px;
	  background-color:red;
	">
	</div>
 </body>
</html>

在这里插入图片描述
2.页面级css

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  div{
      width:100px;
	  height:100px;
	  background-color:green;
	  }
  </style>
 </head>
 <body>
    <div>
	</div>
 </body>
</html>

在这里插入图片描述
3.外部css文件

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="Untitled3.CSS">
 </head>
 <body>
    <div>
	</div>
 </body>
</html>


div{
      width:100px;
	  height:100px;
	  border-radius:50%;
	  background-color:black;
	  }

``上述两段代码要分别放置，如图所以
在这里插入图片描述

在这里插入图片描述
选择器
1.id选择器（一对一）
在这里插入图片描述

在这里插入图片描述
2.class（类）选择器（多对多）
在这里插入图片描述
在这里插入图片描述
3.标签选择器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
4.通配符选择器（只要是标签都可以作用）
在这里插入图片描述
在这里插入图片描述
5.属性选择器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

它们的优先级排序：
!important >行间样式 > id > class == 属性选择器 > 标签选择器 > 通配符

叹！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET中使用CSS样式
遇见--专栏
09-19 1万+
1 使用link标签去调用样式，即调用css文件中的样式，可以直接将CSS文件拖拽到html页的head下面 此方法先加载css，后加载html 网页标题 2 使用style标签 网页标题 body { width:100%; }
css对齐方式
weixin_42371145的博客
07-24 2427
1、被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center /left/right 来实现的。 button、input、select、textarea、img、progress、 2、当被设置元素为块状元素时用 text-align：center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的，...
1css狂神说
Insist___的博客
09-10 220
文章目录1css的带入方式2选择器2.1基本选择器2.2层次选择器2.3结构伪类选择器2.4属性选择器3 美化网页元素3.1 字体样式 1css的带入方式 行内样式 内部样式 外部样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导入方式</title> <!-- 外部样式,链接式 链接css文件-->
CSS引入的方式有哪些? link和@import的区别是?
sweetllh的博客
07-01 1160
有 4 种方式可以在 HTML 中引入 CSS。 1.内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。 示例：<div style="background: red"></div>这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改
css居中方式实现
always_yang的博客
06-06 146
1.水平居中 1.1 text-align:center 父盒子设置text-align:center,如果子盒子不是行内元素，可以先设置display:inline或者display:inline-block转成行内元素。 .father{ text-align:center; } .chlidren{ display:inline-block; background: red; } <div class="father"> <div class="chlidren
CSS引入方式资料下载
01-11
虽然这不是标准的CSS引入方式，但可以用来间接实现类似内联样式的功能。例如： ```html ;">这是一个红色的文字 ``` 然后通过JavaScript来读取并应用这些样式。 六、媒体查询（Media Queries） 媒体查询是CSS3引入的...
zxymax#coding#CSS引入方式1
07-25
不足页面维护可能会非常棘手过多添加同样的样式会导致页面复杂嵌入方式特点CSS与HTML一起作为一个文件，不需要额外的HTTP请求适合于动态样式，对于不同的用户从
html的css引入方式学习截图
11-01
html的css引入方式学习截图
02-css引入方式.html
09-17
02-css引入方式.html
Web前端与移动开发之css的引入方式
07-30
css的引入方式 （1）行内样式表（行内式 内联样式表） 控制一个标签 属性： 属性值；"></div> （2）内部样式表（嵌入式） 控制一个页面 把所有样式定义在<style></style>标签中 对当前所有标签生效 （3）...
html之无序列表
qq_44721518的博客
08-02 8029
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" co
几种border属性
qq_44721518的博客
08-20 7814
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="Untitled3.css"> </head> <body> <div></div> </b
时钟演示
qq_44721518的博客
02-03 144
运行的时钟 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>运行的时钟</title> <style> input { font-size: 30px; color: #FFFFFF; background-color: yellowgreen;
css之权重
qq_44721518的博客
08-04 123
css权重（256进制）
css基础属性
qq_44721518的博客
08-04 122
div { font-size:50px } css代码写在两个大括号之间，里面写属性，属性格式为 属性名1：属性值1； 属性名2：属性值；。。。。。 font-size设置的是字体的高。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta
html
qq_44721518的博客
08-01 113
空格与换行在html中只能作为文本分隔符 <html > <head> <meta charset="UTF-8"> <title>网页设计</title> </head> <body> 二十 而立 </body> </html> 效果如下： <html > <head> <meta charset="UTF
html高级标签
qq_44721518的博客
08-01 101
有序列表 <html > <head> <meta charset="UTF-8"> <title>网页设计</title> </head> <body> 你最喜欢的的水果 <ol type="1" reversed="reversed"> <li>苹果</li> <li>橘子</li> <li>葡
DOM
qq_44721518的博客
12-15 95
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div1{ width: 100px; height: 100px; background-color: brown; } .div2{ width: 100px; h
表单
qq_44721518的博客
09-07 94
1.<input>元素 <input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y"> 常用属性含义： type属性：指定要加入表项的类型（text,password,checkbox,radio,button,hidden,image,file,submit,reset等）. name属性：该表项的控制名，主要在处理表单时起作用。 size：输入字段中可见字符数。 maxlength：允许输入的最大字符数。 1.1
帮我出十道和CSS3和浮动、定位、弹性布局、nth-child、css选择器、css定义、css引入方式的高难度判断题
最新发布
09-18
好的，以下是十道高难度的CSS3和布局相关的判断题： 1. CSS3中的box-shadow属性可以用来添加阴影效果，但是无法控制阴影的大小和位置。 （错误，box-shadow属性可以通过设置参数来控制阴影的大小和位置） 2. 使用浮动布局时，可以通过设置clear属性来清除浮动。 （正确，clear属性可以用来清除前面元素的浮动） 3. 弹性布局中，flex-grow属性可以用来控制项目的伸展比例。 （正确，flex-grow属性可以用来设置项目的伸展比例） 4. nth-child选择器可以用来选中某一元素的第n个子元素。 （正确，nth-child选择器可以用来选中指定位置的子元素） 5. 在CSS定义中，!important可以用来强制覆盖其他样式的定义。 （正确，!important可以用来强制覆盖其他样式的定义） 6. 在CSS选择器中，通配符（*）可以匹配任何元素。 （正确，通配符可以匹配任何元素） 7. 使用绝对定位时，可以通过设置top、right、bottom、left属性来控制元素的位置。 （正确，top、right、bottom、left属性可以用来控制绝对定位元素的位置） 8. 在CSS定义中，字体属性必须放在最前面。 （错误，字体属性可以放在定义的任何位置） 9. 使用弹性布局时，可以通过设置align-items属性来控制项目在交叉轴上的对齐方式。 （正确，align-items属性可以用来控制项目在交叉轴上的对齐方式） 10. 在CSS引入方式中，@import可以用来引入外部CSS文件。 （正确，@import可以用来引入外部CSS文件）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值