一,css是什么?

CSS全称为“层叠样式表” ,与HTML相辅相成,实现网页的排版布局与样式美化

二,CSS使用方式

1.行内样式/内联样式(单一页面中使用)

借助于style标签属性,为当前的标签添加样式声明

<标签名 style="样式声明">

CSS样式声明 : 由CSS属性和值组成:

style="属性:值;属性:值;"

常用CSS属性 :

  • 设置文本颜色 color:red;
  • 设置背景颜色 background-color:green;
  • 设置字体大小 font-size:32px;

2. 内嵌样式(少量页面中使用)

选择器 : 通过标签名或者某些属性值到页面中选取相应的标签,为其应用样式

/*标签选择器 : 根据标签名匹配所有的该标签*/
p{
color:red;
}

借助于style标签,在HTML文档中嵌入CSS样式代码,可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配标签并应用样式

  <style>
选择器{
属性:值;
属性:值;
}
</style>

3. 外链样式表(项目中使用)

  • 创建外部样式表文件 后缀使用.css
  • 在HTML文件中使用<link>标签引入外部样式表
 <link rel="stylesheet" href="URL" type="text/css">
  • 样式表文件中借助选择器匹配标签应用样式

三, 样式表特征

1. 层叠性:多组CSS样式共同作用于一个标签

2. 继承性:后代标签可以继承祖先标签中的某些样式 例 : 大部分的文本属性都可以被继承

3. 样式表的优先级:优先级用来解决样式冲突问题。同一个标签的同一个样式(例如文本色),在不同地方多次进行设置,最终选用哪一种样式?此时哪一种样式表的优先级高选用哪一种。

  • 离标签最近的样式优先级最高(就近原则)
  • 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
  • 浏览器默认样式和继承样式优先级较低

四,CSS 选择器

1. 作用:匹配文档中的某些标签为其应用样式

2. 分类 :

1. 标签选择器:根据标签名匹配文档中所有该标签

语法:

标签名{
属性:值;
}

2.id选择器:

注意 :id属性值自定义,可以由数字,字母,下划线,- 组成,不能以数字开头;尽量见名知意,多个单词组成时,可以使用连接符,下划线,小驼峰表示。

根据标签的 id 属性值匹配文档中惟一的标签,id具有唯一性,不能重复使用

语法 :

#id属性值{

  }

3. class选择器/类选择器:根据标签的class属性值匹配相应的标签,class属性值可以重复使用,实现样式的复用

语法:

.class属性值 {

}

4. 群组选择器:为一组标签统一设置样式

语法 :

selector1,selector2,selector3{
}

5. 后代选择器:匹配满足选择器的所有后代标签(包含直接子标签和间接子标签)

语法 :

selector1 selector2{
}

匹配selector1中所有满足selector2的后代标签

6. 子代选择器:匹配满足选择器的所有直接子标签 语法 :

selector1>selector2{
}

7. 伪类选择器:为标签的不同状态分别设置样式,必须与基础选择器结合使用

分类 :

:hover 鼠标滑过时的状态
:focus 焦点状态(文本框被编辑时就称为获取焦点)

使用 :

.c1:hover{ }
.txt:focus{}

3. 选择器的优先级:选择器为标签设置样式,发生冲突时,主要看选择器的权重,权重越大,优先级越高,也可用 !important 变更。

五、标签的尺寸和颜色

1. 过渡动画

2. 标签的尺寸

  1. px 像素单位

  2. 百分比 % 相对父标签

  3. 相对单位 em 1em=16px 通常用于移动端的页面开发 常用1.5em

  4. rpx=小程序页面的单位

  5. 当页面标签的内容大小超出了标签的宽度,可以使用 overflow 属性 来解决超出部分的显示方式,建议使用auto;

3. 颜色

  1. 标签的字体,背景,边框

  2. 使用方式 color:red;

    1. 英文单词

    2. rgb:

      1. rgb(0~255),rgb(2,3,5)

      2. rgba(0~1),rgba(2,3,5,0.5)

    3. 16进制

      1. 长的16进制 #ffffff; #000000

      2. 短的16进制 #fff;#000

CSS的基础使用的更多相关文章

  1. 2天驾驭DIV+CSS (基础篇)(转)

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  2. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  3. 【笔记-前端】div+css排版基础,以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  4. CSS 设计彻底研究(一)(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  5. 精通CSS+DIV基础总结(一)

    这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...

  6. CSS样式基础知识

    CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...

  7. 第六十九节,css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  8. 【CSS入门基础,有需要的看过来哦】心境,心静,不轻言放弃!---致CSS

    整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...

  9. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  10. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

随机推荐

  1. Linux c++ vim环境搭建系列(2)——Ubuntu18.04.4编译安装llvm clang

    2. 源码编译安装llvm clang 参考网址: https://llvhttps

  2. java解惑之常常忘记的事

    java解惑之常常忘记的事 2012-10-17 18:38:57|  分类: JAVA |  标签:基础知识  软件开发  |举报|字号 订阅     针对刚接触java的菜鸟来说,java基础知识 ...

  3. 【Canvas】(2)---绘制折线图

    绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...

  4. yum 下载全量依赖 rpm 包及离线安装(终极解决方案)

    目录 简介 验证环境 查看依赖包 方案一(推荐):repotrack 方案二:yumdownloader 方案三:yum 的 downloadonly 插件 离线安装 rpm 参考资料 简介 通常生产 ...

  5. 怎么在执行Python脚本时,密码等敏感信息也不让它出现

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http ...

  6. stand up meeting 1/12/2016

    part 组员                工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云  UI测试和调整:页面跳转调整    3 查漏补缺,扫除UI b ...

  7. Oracle数据库提权

    一.执行java代码 简介 oracle提权漏洞集中存在于PL/SQL编写的函数.存储过程.包.触发器中.oracle存在提权漏洞的一个重要原因是PL/SQL定义的两种调用权限导致(定义者权限和调用者 ...

  8. 《Spring In Action》阅读笔记之核心概念

    DI 依赖注入:在xml中配置的bean之间的依赖关系就是依赖注入 AOP 面向切面编程:如在xml中定义某个方法为切点,然后配置在该切点(该方法)调用前后需要调用的方法,从而简化了代码并解耦. Sp ...

  9. TensorFlow keras dropout层

    # 建立神经网络模型 model = keras.Sequential([ keras.layers.Flatten(input_shape=(28, 28)), # 将输入数据的形状进行修改成神经网 ...

  10. CSS中“~”(波浪号)、“,”(逗号)、“+”(加号)、“>”(大于号)、“ ”(空格)详解

    “~”:$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点,相当于nextAll()方法: “+”:$('pre + nextbrother')表示获得pre节点的下一个兄弟节 ...