CSS学习—day1
摘要:web前端设计三剑客分为是html、CSS、Javascript,前面我们已经对html基础知识做了介绍,它定义了页面基本组成,而CSS则控制网页的样式和布局。
首先,明确一个问题,什么是CSS?
1.CSS指层叠样式表 (Cascading Style Sheets)
2.能定义如何显示HTML元素
3.解决内容与表现分离的问题
4.外部样式表极大提高工作效率
下面,开始正题
- CSS语法
CSS规则由两个主要部分组成:选择器,以及一条或多条声明
选择器 声明1 声明2
h1 {color:blue;text-align:center;}
属性 值 属性 值
CSS声明总是以分号(;)结束,声明总以大括号({})括起来:
如h1 {color:blue;text-align:center;}
CSS注释以“/*”开始,以“*/”结束。
CSS Id和Class
以#表示选择器的id
以.表示选择器的class
以p.表示所有p标签class
- CSS创建
样式表的插入:①外部样式表 ②内部样式表 ③内联样式表
外部样式表:适用于样式需要应用到很多页面
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
每个页面使用<link>标签链接到样式表,且位于文档的头部。
mystyle.css样式表不能包含任何的html标签,如
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
内部样式表:当单个文档需要特殊的样式时,就应该使用内部样式表。
使用<style>标签在文档头部定义,如
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式:相关标签内使用
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
- 背景
背景颜色:body {background-color:#b0c4de;}
背景图片:
body {background-image:url('paper.gif');}图片默认在水平和垂直方向平铺
body {background-image:url('paper.gif');background-repeat:repeat-x;}图片在水平方向平铺
body {background-image:url('paper.gif');background-repeat:no;}图片不平铺
body {background-image:url('paper.gif');background-repeat:no;background-position:right top;}图片不平铺且在右上
属性值顺序
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS学习—day1的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结(二) 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结(一) 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- html+css学习总结
HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
随机推荐
- 前端开发--ajax
使用ajax,他是有两个模块的,一个是客户端,一个是服务端. 客户端负责发送数据,发送数据的方式有两种,一种是GET,另一种是POST. 服务端是用来接收,处理数据和发送请求的数据. 要想使用ajax ...
- 20199310《Linux内核原理与分析》第十二周作业
1.问题描述 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,通过学习重现攻击该漏洞,加深对于ShellSho ...
- lodctr /R 失败的情况
I've resolved with the following steps: PS C:\Windows\system32> cmd Microsoft Windows [Version 6. ...
- SQL计算算数表达式的函数自定义(加减乘除)
一.整体思路:循环遍历表达式字符串,设置一个index从第一个字符开始检测当前数字是否可以和后面的数字进行运算,如果可以运算,将两个数挑出来运算,然后用运算的结果替换原来表达式中的这两个数和符号,计算 ...
- 关于 cmd 命令运行时发现错误(已加 classpath): 找不到或无法加载主类 xxx.class 原因: Java .lang.ClassNotFoundException: xxx.class
我的是这个代码,出现了,无法加载主类的问题,查看了一些回答,有的是说要删除包名(我的没有带包,所以不是这个问题),还有的是说classpath的配置有问题,但是我的java ,javac测试jdk的时 ...
- Windows 怎么启动 apache
在可执行目录下找到httpd.exe命令,然后运行cmd,执行类似以下命令:C:\"Program Files"\"Apache Software Foundation& ...
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 K题 center
You are given a point set with nn points on the 2D-plane, your task is to find the smallest number o ...
- python sort和sorted的区别
sort 与 sorted 区别: sort 是应用在 list 上的方法,使用方法为 list.sort(),是对原有列表进行操作,改变原有列表的排序: sorted 可以对所有可迭代的对象进行排序 ...
- 阿里云服务器连接AWS-S3
1.找到一个路径下载 aws-cli (使用离线包安装) wget -P /usr/local/software https://s3.amazonaws.com/aws-cli/awscli-bu ...
- E. Height All the Same
E. Height All the Same 题目大意: 给你一个n*m 的矩阵,让你在里面填数字代表这个位置的高度,数字的范围是[L,R],有两种操作,第一种就是给一位置的高度加2,第二种就是给两个 ...