一、CSS的作用
  1、以统一的方式实现样式的定义
  2、提高页面样式的可重用性和可维护性
  3、实现了内容(HTML)和表示(CSS)的分离
  HTML和CSS之间有什么关系?
    HTML:构建网页的结构
    CSS :构建HTML元素的样式

  样式汇总:
    color:red 字体颜色
    font-size:字体大小
    font-family:字体样式
    background-color 背景颜色
    width:宽度
    height:高度

  字体使用实例(样式)

    font-family:字体的种类

    font-size:字号

    color:字体的颜色

    font-weight:字体的粗细

    line-height:字体的行高

    text-indent:设置抬头距离css缩进

    letter-spacing:设置字与字间距(字符间距离)

    text-decoration:规定添加到文本的修饰

      none:默认。定义标准的文本。

      underline:定义文本下的一条线。

      overline:定义文本上的一条线。

      line-through:定义穿过文本下的一条线。

      blink:定义闪烁的文本。

      inherit:规定应该从父元素继承 text-decoration 属性的值。

二、CSS的使用

  1.内联样式

    将样式声明在元素的style属性中

    <p style="color:red(样式声明)">1</p>

    样式声明 表示一个具体的显示效果,可以多个同时存在的,多个样式之间用 ; 进行隔开

    每个样式声明都有两部分组成

      color:样式属性

      red:属性值

  2.内部样式表

    1.在head里面加上一个  style标签

    2.在style中添加任意多的样式

      p{样式声明;}

      选择器:规范了页面中哪些元素能够使用定义好的样式

  3.外部样式表

    1.创建一个单独的样式表文件保存样式规则

      在css文件夹下新建一个CSS文件  并在里面添加好样式

    2.在需要使用得页面上添加 link 标签 进行引入

  4.引入方式的优先级

    就近原则  谁离这个标签近 最后就是谁的样式

三、CSS样式表的特征

  1.继承性

    子级标签可以直接使用父级元素声明好的样式 (大部分的CSS样式是可以被继承)

  2.层叠性

    可以同时写多个样式

  3.优先级

    低:  浏览器的缺省值

    中:  就近原则

    高:  内联样式

  4.!improtant规则

    作用: 强制调整优先级  (一定是最后显示的)

    打破了优先级规则

四、CSS基础选择器

  作用: 规范了页面中哪些元素能够使用定义好的样式

  目的: 匹配页面元素(找到页面的元素)

    1.通用选择器

      作用:匹配页面中的所有元素

      用法:*{}

    2.标签选择器

      作用:匹配当前所有这一类的标签

      用法 p{}

    3.类选择器

      作用:由css定义好,可以被任意标记的class属性值进行引用的选择器

      语法:

          1.在标签内 加上class属性

          2.在样式表中  .类名{} 进行引入

      注意: 类名或者ID名  不能以数字开头

      除了 _  -以外不能有其他的特殊字符

    4.ID选择器

      作用:针对指定ID值的元素去定义样式

      语法:

        1.在标签内加上ID属性

        2.在样式表中 使用 #ID名{}  进行引入

    5.基础选择器优先级

   1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)

   2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}

   3.其次优先级是(类选择器,假设级别为10).divClass{color:Red;}

   4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}

   5.那么后代选择器的优先级就可以计算了啊

       比如

       .divClass span { color:Red;} 优先级别就是:10+1=11

      总结:优先级:  id > class >  p(标签)> *

      权值;

      标签选择器       0,0,0,1

      类选择器          0,0,1,0

      id选择器           0,1,0,0

      内联样式          1,0,0,0

      选择器的权值加到一起,大的优先;如果权值相同,后定义的优先

五、复杂的选择器

  1.群组选择器

    作用:选择器声明式以 , 分割 的选择器列表

  2.后代选择器

    后代: 只要是具备层级关系的元素

    使用空格 隔开

  3.子代选择器

    子代:只具备一级层级的关系的元素

    使用  > 隔开

六、尺寸属性

  1、作用:用户设置元素的宽度和高度 单位为px  百分比

  2.宽度属性和高度属性

    width  height  设置元素的宽高

    max-width max-height  最大的宽度  和 最大的高度

    min-width min-height  最小的宽度  和 最小的高度

  3.允许被修改高度和宽度的元素

    1.块级元素允许被设置宽高

    2.行内块大部分允许被设置宽高的 例如 表单控件  单选和复选 是不能修改尺寸

    3.存在width和height属性的元素 可以设置宽高的样式 img table

  4.溢出

    使用尺寸属性限制元素大小的时候,如果内容所需要的空间太小大于元素本身,会导致溢出效果

    属性:

    overflow:规定当内容溢出元素框时发生的事情。

    相应值:

      visible:默认的效果  溢出可见

      hidden:隐藏  溢出的时候隐藏

      scroll:滚动  当元素溢出的时候会出现滚动条  溢出时滚动条可用

      auto:自动  内容溢出的时候会出现但是没有溢出的时候不出现

七、边框阴影

  定义:box-shadow是css3新增的一个属性。在W3School里,定义box-shadow是向框添加一个或者多个阴影的属性。

  语法:box-shadow: h-shadow v-shadow blur spread color inset.

     h-shadow: 阴影的水平位置

     v-shadow:阴影的垂直位置

  blur:阴影的模糊半径

  spread:阴影的半径

  color:阴影的颜色

  inset:将外部阴影改成内部阴影【outset反过来】

  根据box-shadow的定义,我们可以为一个框设置一个阴影,也可以设置多个阴影。

  当我们需要设置多个阴影时,中间需要将每个阴影用逗号隔开。

  1. h-shadow【必需】

  这个值代表的是阴影在x轴上的阴影位置。可以是负值。

  当它为正值的时候表示向右位移一定的距离【出现在元素的右边】,负值表示向左位移【出现在元素的左边】。这个距离的单位可以是px、em或者rem;

  需要注意的是:h-shadow是必需的,不能省略!

  2. v-shadow【必需】

  这个值表示阴影在y轴上的位置。也可以是负值。

  当值为负的时候表示向上偏移一定的距离【出现在元素的上方】;值为正的时候表示向下偏移一定的距离【出现的元素的下方】

  3. blur【可选】

  blur指的是阴影的模糊半径。这个值使得阴影部分的过渡看起来更柔和。我们可以试一试不同blur值对阴影效果的影响:

  随着模糊半径数值的增大,阴影的模糊程度越高。

  4. spread【可选】

  spread表示的是阴影的半径。我在网上看到有人对spread和blur的区别发出疑问,其实很简单:blur用于描述模糊半径,它的值决定了阴影的模糊程度;而spread是表示阴影所占区域的大小,这是两个不同的概念。

  5. color【可选】

  阴影的颜色可以用任何颜色单位来表示。当我们没有设置color值的时候,默认就是黑色。

  6. inset 【可选】

  默认情况下,我们设置的阴影都是外部阴影,而这个属性值的作用是将外部阴影转换成内部阴影。

  box-shadow: 10px 10px 10px 5px blue; /*默认为外部阴影*/

  box-shadow: 10px 10px 10px 5px blue inset;/*将外部阴影切换为内部阴影*/

CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)的更多相关文章

  1. [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  2. css入门基础知识

    一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...

  3. HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版​

    HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...

  4. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  5. CSS入门知识汇总

    1.CSS认识 在谈论CSS的概念之前,我们先说一说web标准的目的——其在于创建一个统一的用于web表现层的技术标准,以便通过不同浏览器或终端设备向最终用户展示信息内容.一个网页的呈现是由三部分组成 ...

  6. CSS样式汇总

    1. Overflow: 是否隐藏超出容器范围之外的内容,主要参数包括Hidden(隐藏),Auto(根据容器内容自动显示滚动条),scroll(显示滚动条,即使内容不超出容器范围,也会显示一个边框, ...

  7. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

  8. web前端学习(三)css学习笔记部分(1)-- css入门基础知识+基本样式

    1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...

  9. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

随机推荐

  1. 带着canvas去流浪系列之五 绘制K线图

    [摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  2. markdown语法之字体、字号、颜色以及背景色

    字体.字号与颜色 html标签:<font> font标签属性: face:字体 size:规定文本的尺寸大小. 可能的值:从 1 到 7 的数字. 浏览器默认值是 3. color: 颜 ...

  3. Springboot结合Redis

    安装 Redis   安装 gcc Yum install gcc-c++ 解压 redis.3.0.0.tar.gz 压缩包 tar -zxvf redis-3.0.0.tar.gz 进入解压后的目 ...

  4. jQuery中操作页面的文本和值

    主要是区分俩种方法: 1.html():可以识别HTML文件,将里面内容全部打印(操作双标签) 2.text():只是将里面的内容打印出来,不能识别HTML格式(操作双标签) <!DOCTYPE ...

  5. MVC方法的返回值类型

    MVC方法返回值类型 ModelAndView返回值类型: 1.当返回为null时,页面不跳转. 2.当返回值没有指定视图名时,默认使用请求名作为视图名进行跳转. 3.当返回值指定了视图名,程序会按照 ...

  6. nginx编译安装配置模块大全

    使用configure命令配置构建.它定义了系统的各个方面,包括允许nginx用于连接处理的方法.最后,它会创建一个Makefile.该configure命令支持以下参数:--help 打印帮助信息. ...

  7. ACM-ICPC 2018 焦作赛区网络预赛 L 题 Poor God Water

    God Water likes to eat meat, fish and chocolate very much, but unfortunately, the doctor tells him t ...

  8. ARTS-S gitlab与jenkins实现持续集成

    jenkins配制 系统管理->管理插件->可选插件->选择安装 Gitlab Hook Plugin和Build Authorization Token Root Plugin插件 ...

  9. synchronized,ReentrantLock解决锁冲突,脏读的问题

    最常见的秒杀系统,解决思路就是从前端.后台服务.数据库层层去掉负载,以达到平衡 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized 和 ReentrantLo ...

  10. css分类和选择器

    css的分类:内联,内嵌,外部 内联:写在标签里,style=样式,控制精准代码实用性差. 内嵌:嵌在<head></head>里 <style type="t ...