CSS学习1

简介: 一、层叠样式表的链接方式。  使用CSS层叠样式表可以很方便的设置所有的标签的属性 ,不用像以前一样我们对每个html标签逐个进行设置  。   在html中使用css有四种方式  。


一、层叠样式表的链接方式。
 使用CSS层叠样式表可以很方便的设置所有的标签的属性 ,不用像以前一样我们对每个html标签逐个进行设置  。
  在html中使用css有四种方式  。

 1、  行内样式   设置html标签的style属性 ,例如<body style="css样式"> 这样设置不能达到一次设置全部更新的效果  。

 2、   内嵌式     
    <style type="text/css">
     <--css层叠样式表样式-->
    </style>

 3、 链接式 利用<link type  rel  href="*.css">标签连接css    rel表示这个文件和当前文件的关系  。type是文件类型   必须放在head标签中这是一个规则,方便浏览器查找样式表 
   <link href="stylesheet/me.css" type="text/css" rel="stylesheet" />

  4、导入方式   url可写可不写 ,但是;必须写要不然会出错误.这个导入方式可以把多个css文件导入到一个css文件中但是最好不要这样做,众多网站设计师的经验。
    我们在制作网站的时候最好用link方式 。
   <style type="text/css">
    @import  url("stylesheet/me.css"); 
   </style>

二、css选择器  css类别选择器,对于标记进行分类设置样式   id选择器(只能出现一次js)
 
   ul可以嵌套使用 
   strong 加强黑体显示  em加强斜体显示
 
   p b{}    表示p标记中包含的b标记的样式

   p.astyle{}表示p标记的类别选择器为astyle的标签的样式     也就是class属性
  
   p,b,h1{} 表示这几个标签样式是一样的,所以我们可以放在一起设置中间用,隔开。   同时对多个元素设置css样式

   如果一个标记包含在另一个标记的里面 那么它会首先继承外面的标记的css样式设置 。如果内部标记自己设置样式 那么会覆盖父标记的样式。

   .class{}     #id{}    a{}  

三、 span标签可以放在div或者p中使用.在div中嵌套span可以设置部分的样式。

     font-family:  黑体,幼圆,楷体;  设置字体 如果系统中有黑体那么用黑体如果没有黑体那么用幼圆  ,如果都没有那么使用浏览器默认字体  
    
     font-size:10px; 
    
     pt是印刷业上常使用的单位,磅的意思.一般也用于页面打印排版. 
     如果使用em来指定填充,填充的宽度是相对于DIV元素的字体大小而定的.
     px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的. 
     mm  毫米  
     cm 厘米 
   
     color 设置字体的颜色  

     font-weight 设置文字的粗细的 。 

     font-style 设置字体风格 
              normal : 正常的字体
              italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
              oblique : 倾斜的字体 

     font-decoration  设置字体的下划线也就是装饰  
          none :  无装饰
          blink :  闪烁    IE貌似不支持
          underline :  下划线
          line-through :  贯穿线
          overline :  上划线
     text-transform : 大小写转换  
        none :  无转换发生
        capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
        uppercase :  转换成大写
        lowercase :  转换成小写
      letter-spacing  字符间距  允许负数 px  


   vertical-align   文本的垂直方向对齐方式 
   ruby-align  水平对齐方式
   
   float:left可以实现文本的首字下沉的效果  第一个字必须必其他的大小要大
   padding-right 设置对象四周的边界  例如表格中的文字 
 

      

目录
相关文章
|
9月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
430 1
|
9月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
433 1
|
10月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法,包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作,并附有代码示例和运行结果图。
135 3
|
11月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day01
阿铭学习HTML基础,包括VSCode快捷生成代码、常用标签如head、title、body、img、a、p等的使用,以及CSS选择器的优先级和基本样式设置,适合前端入门学习。
295 12
|
10月前
|
前端开发 JavaScript 算法
HTML/CSS/JavaScript基础学习day03-作业
本内容包含多个 JavaScript 编程示例,涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作,适合练习基础算法与逻辑思维。
195 5
|
10月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习,包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图,帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容,强化知识点记忆。
155 2
|
11月前
|
XML 人工智能 前端开发
HTML/CSS/JavaScript基础学习day02
阿铭学习day02内容涵盖VSCode常用插件安装与配置,如中文语言包、路径提示、Vue开发工具等,同时介绍了通义灵码AI编程助手的使用方法,提升开发效率。
164 1
|
10月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识,包括函数定义、调用方式及参数使用,以及Array和String对象的常用操作。
173 0
|
10月前
|
JavaScript 前端开发 Java
HTML/CSS/JavaScript基础学习day03
本内容为阿铭学习JavaScript的第三天笔记,涵盖JavaScript基础概念、引入方式、基础语法、变量声明、数据类型、运算符、类型转换及流程控制语句等内容,适合初学者了解JavaScript编程语言的核心知识点。
192 0
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
226 4

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    567
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    430
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    433
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    280
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    546
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    724
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1405
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    314
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1167
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    507