CSS学习笔记

一、CSS基础

1、CSS简介

层叠：一层一层的；

样式表：很多的属性和样式

CSS语法：

<style>

选择器 { 属性名:属性值; 属性名:属性值; ……  }

</style>

2、CSS和HTML的结合方式

  • 在HTML标签中的style属性里添加CSS代码；
  • 在头标签中添加<style>标签；
  • 在style标签中使用@import导入外部CSS文件：

<style>

@import url("css/test.css");

</style>
  • 在头标签中使用<link>标签导入外部CSS文件：

<link rel="stylesheet" href="css/test.css" />

3、CSS选择器

  • 使用标签名作为选择器；
  • 使用HTML标签中的class属性作为选择器：
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

.center

{

	text-align:center;

}

</style>

</head>

<body>

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

p.center

{

	text-align:center;

}

</style>

</head>

<body>

<h1 class="center">这个标题不受影响</h1>

<p class="center">这个段落居中对齐。</p>

</body>

</html>

　　

  • 使用HTML标签中的id属性作为选择器：
  • <!DOCTYPE html>
    
<html>
    
<head>
    
<meta charset="utf-8">
    
<title>菜鸟教程(runoob.com)</title>
    
<style>
    
#para1
    
{
    
	text-align:center;
    
	color:red;
    
}
    
</style>
    
</head>

<body>
    
<p id="para1">Hello World!</p>
    
<p>这个段落不受该样式的影响。</p>
    
</body>
    
</html>

    　　

  • CSS选择器的优先级：
  • HTML标签中的style属性  >       id选择器  >  class选择器 >  标签选择器
  • 扩展选择器：
  • 关联选择器：当HTML标签之间存在嵌套关系时             
                    <p><font></font></p>

选择器：p  font{}

  • 组合选择器：要对 HTML中多个标签设置同样的样式，

<p></p>

<font></font>

选择器：p,font{}

  • 伪元素选择器：是HTML预定义好的元素

/*未被访问过*/

a:link{

color: black;

}

/*鼠标悬停*/

a:hover{

color: red;

}

/*点击鼠标，没有释放时*/

a:active{

color: darkmagenta;

}

/*访问过后*/

/*a:visited{

color: black;

}*/

4、CSS样式优先级

由外到内，由上到下，优先级为由小到大。

后加载的优先级越高。

二、CSS常用属性

1、文字修饰

  • color颜色
  • font-family字体
  • font-size字体大小
  • font-weight粗细
  • letter-spacing字间距
  • text-indent 文字缩进
  • text-align 对齐方式
  • line-height 行高
  • 外边距（margin）

2、文本修饰

3、盒子模型

margin: 10px  20px  30px  40px; 上、右、下、左

margin: 10px  20px  30px ; 上、左右、下

margin: 10px  20px; 上下、左右

margin: 10px; 四周

  • 边框（border）

border-方位（bottom、top、left、right）

border-style 边框的样式

border-color 边框颜色

  • 内边距（padding）

参考外边距

4、定位

  • 固定定位

position：fixed；

调整位置：top、left、right、bottom

  • 相对定位

position: relative; 未脱离流布局；

  • 绝对定位

position: absolute;  相对于最近的已定位的父元素，脱离流布局；

5、层叠顺序

z-index 值为数字，数字越大，层次越高；

6、列表样式

list-style: none; 取消列表样式

7、元素溢出

overflow: hidden; 溢出部分隐藏

8、圆角

border-radius:  值;  值可以为像素或百分比

9、滚动

<marquee >

要滚动的文字或图片

</marquee>

常用属性：

behavior：设定滚动的方式

alternate： 表示在两端之间来回滚动

scroll：表示由一端滚动到另一端，会重复。

slide：表示由一端滚动到另一端，不会重复。

direction：设定活动字幕的滚动方向up向上滚动，down向下滚动，left向左滚动，right向右滚动

height：设定滚动字幕的高度

width： 设定滚动字幕的宽度

scrollamount：设定滚动速度，属性值为正整数，值越大滚动速度越快

10、盒子模型

  • 外边距（margin）：
  • margin：10px;  //上下左右的外边距都是10px
  • margin：10px  20px;  //外边距的值：上下10px，左右20px；
  • margin: 10px  30px  60px;  //外边距的值：上10px，左右30px，下60px;
  • margin:10px 20px 30px 40px;  //上10px，右20px，下30px，左40px；
  • 内边距（padding）：
  • 边框（border）：
  • border-radius：设置圆角

CSS教程详解的更多相关文章

  1. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  2. 史上最全的maven pom.xml文件教程详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  3. SAE上传web应用(包括使用数据库)教程详解及问题解惑

    转自:http://blog.csdn.net/baiyuliang2013/article/details/24725995 SAE上传web应用(包括使用数据库)教程详解及问题解惑: 最近由于工作 ...

  4. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  5. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  6. 重置出错？微软Win10平板Surface Pro 4重装系统教程详解

    重置出错?微软Win10平板Surface Pro 4重装系统教程详解 2015-12-11 15:27:30来源:IT之家作者:凌空责编:凌空 评论:65 Surface Pro 4系统重置出错该怎 ...

  7. QuartusII13.0使用教程详解（一个完整的工程建立）

    好久都没有发布自己的博客了,因为最近学校有比赛,从参加到现在都是一脸懵逼,幸亏有bingo大神的教程,让我慢慢走上了VIP之旅,bingo大神的无私奉献精神值得我们每一个业界人士学习,向bingo致敬 ...

  8. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  9. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

随机推荐

  1. char.IsWhiteSpace(str,num),TimeSpan

    IsWhiteSpace(String, Int32) 指示指定字符串中位于指定位置处的字符是否属于空格类别. TimeSpan TimeSpan ts=new TimeSpan(4,30,0); C ...

  2. C++ 手把手教你实现可变长的数组

    01 实现自定义的可变长数组类型 假设我们要实现一个会自动扩展的数组,要实现什么函数呢?先从下面的main函数给出的实现,看看有什么函数是需要我们实现的. int main() { MyArray a ...

  3. 装上这 10 个插件，你就是这条 Gai 最靓的仔！

    直奔主题,给大家推荐 10 个好用的插件. 1.「Adblock Plus」 世界排名第一的免费广告拦截程序 ​ 相信大家都有这样的体验,进某个论坛.新闻或者购物网站,广告满天飞,关掉之后还时不时弹出 ...

  4. 作用域,作用域链,垃圾收集,js解析

    变量中包含基本数据类型和引用数据类型,基本类型指简单的数据值,引用类型由多个值构成的对象. 引用类型可以为其添加属性和方法,也可以改变和删除属性和方法. 复制变量值:     基本类型:一个变量向另一 ...

  5. 区块链社交APP协议分析：BeeChat

    - BeeChat是什么 - BeeChat报文情况 BeeChat使用过程中产生的报文如下: 可以看到,其使用443端口,但内容并非SSL承载,格式不符合SSL,内容中含MsgNtf等明文串,但大部 ...

  6. BayaiM__ORACLE之ASM概念 --V 1.0.0

    BayaiM__ORACLE之ASM概念                                --V 1.0.0 -------------------------------------- ...

  7. [Go] gocron源码阅读-flag包实现命令行参数获取

    调用flag包可以方便的获取到命令行中传递的参数,比如可以实现类似nginx执行程序获取命令行参数执行不同操作的目标 package main import ( "flag" &q ...

  8. debian 10 安装fcitx 后设置

    设置好代理后 apt-get install fcitx 后 仍然看不到 语言栏 可能是 在设置fcitx时 的字体太小了 输入法配置 ->外观->字体 加大 即可

  9. 2019 Multi-University Training Contest 1 String（序列自动机+贪心）

    题意 链接:https://vjudge.net/problem/HDU-6586 给你一个字符串和k,还有每个字符出现次数的限制,求一个长度为k的字典序最小的满足限制的子序列. 思路 先构造出序列自 ...

  10. python 将带有TZ的UTC时间字符串，转换成本地时间

    整个地球分为二十四时区,每个时区都有自己的本地时间.在国际无线电通信中,为统一而普遍使用一个标准时间,称为通用协调时(UTC, Universal Time Coordinated).UTC与格林尼治 ...