tnblog
首页
视频
资源
登录

css基础选择器和字体相关样式

1853人阅读 2019/10/28 21:38 总访问:4184 评论:0 收藏:0 手机
分类: 基础html.css

   今天学习了css基础选择器感觉自己又成长了

1、内部样式表

  1. <head>
  2. <style type="text/CSS">
  3.     选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
  4. </style>
  5. </head>

2、行内式(内联样式)

  1. <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

3、外部样式表(外链式)

  1. <head>
  2.   <link href="CSS文件的路径"  rel="stylesheet" />
  3. </head>

4、类选择器

  1. .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

   案例:

  1. <head>
  2.         <meta charset="utf-8">
  3.         <style>
  4.         span {
  5.             font-size100px;
  6.         }
  7.         .blue {
  8.             color: blue;
  9.         }
  10.         .red {
  11.             color: red;
  12.         }
  13.         .orange {
  14.             color: orange;
  15.         }
  16.         .green {
  17.             color: green;
  18.         }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <span class="blue">G</span>
  23.         <span class="red">o</span>
  24.         <span class="orange">o</span>
  25.         <span class="blue">g</span>
  26.         <span class="green">l</span>
  27.         <span class="red">e</span>
  28.     </body>

5、多类名选择器

  1. <div class="pink fontWeight font20">刘小贱</div>
  2. <div class="font20"></div>
  3. <div class="font14 pink"></div>
  4. <div class="font14"></div>

6、通配符选择器


  1. * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

7、CSS字体样式属性

     (1)font-size:字号大小

              font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少

     (2)font-family:字体

                font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体

      (3)font-weight:字体粗细

         font-weight属性用于定义字体的粗细,其可用属性值:normal、bold 100~900(100的整数倍)。

数字 400 等价于 normal,而 700 等价于 bold。  但是我们更喜欢用数字来表示。

      (4)font-style:字体风格

                 font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

normal:默认值,浏览器会显示标准的字体样式。

italic:浏览器会显示斜体的字体样式。



     (5)font:综合设置字体样式 (重点)

 选择器{font: font-style  font-weight  font-size/line-height  font-family;}

   注意:

        使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。




  

   



评价

css弹性盒子,flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

css图片和文字对齐问题

文字和图片写到一排经常会出现对不齐的问题 这样感觉图片会上来一点没有和文字对齐,如下图 但是如果修改下html结...

css实现简单矩形对话框

在前端做项目时,我们可能会遇到写对话框的需求,这次做视频会议页面就遇到了,记录下日后有个参照。//网页部分 &lt;divcla...

如何修改css中存在的element.style内联样式

改腾讯地图的时候调整了下样式,发现样式一直存在问题,修改style里面的值,一点用都没有,html中这个值还找不到是在哪里出...

珍藏!! JS css不传之秘集合

&lt;!--其中5指每隔5秒刷新一次页面--&gt; &lt;metahttp-equiv=&quot;refresh&quot;content=&quot;5&quot;&gt; =========...

css中单位pxem,rem和vh/vw的理解

&gt;px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

DIV+css网页布局常用的一些基础知识整理

一.文件命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print...

css相对定位与绝对定位

一般相对定位和绝对定位可以配合起来使用 例如实现如下的效果 只需要在外层div设置为相对定位,在内部设置为绝对定位就...

修改了css后,让浏览器从缓存中更新

当我们修改了css后,如果不做一些操作,浏览器是不会自动更新我们的样式文件的。除非是过期或者用户手动刷新清理缓存等。所...

css定位的简单运用

父容器使用相对定位position: relative子容器使用绝对定位position: relative这样就可以子容器相对父容器定位了,可以写一...

jscss异步加载

有些时候为了效率,我们需要js与css能够异步加载方法1:直接在后面加一个async的关键字&lt;scriptsrc=&quot;~/lib/jquery/d...

css3样式学习代码

上代码!上代码!不说了&lt;!DOCTYPEhtml&gt; &lt;htmllang=&quot;en&quot;&gt; &lt;head&gt; &lt;metacharset=&quot;UT...

css实现动画效果案列:冒泡案列

css实现动画效果案列:冒泡案列效果图:代码:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;...

html/css样式

代码: &lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt;title&gt...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板

DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样:效果:可以看到这个div已经居中了但是...

使用jquery操作元素的css样式(获取、修改等等)

使用jquery操作元素的css样式(获取、修改等等) //1、获取和设置样式 $(&quot;#tow&quot;).attr(&quot;class&quot;)...
我很善良,也很坏
排名
14
文章
75
粉丝
21
评论
43
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术