CSS相关知识及入门
CSS（层叠样式表）
作用
修饰HTML页面，美化
CSS代码规范
- 放置规范
- 在
<style>标签内容体中书写样式代码 <style>标签放置在<head>标签内、
- 在
- 格式规范
- 选择器名称{属性名:属性值; .....}
- 选择器：指定CSS样式作用在哪些HTML标签上
- 代码规范
- 属性名和属性值之间是键值对关系
- 属性名和属性值之前使用
：连接，最后用;结束 - 如果一个属性名有多个属性值，那多个值之间使用空格分开
- CSS注释：
/*注释内容*/
CSS选择器
元素选择器
- 就是以HTML中的标签名作为选择器名称
- 选择CSS代码作用于对应标签名的标签上
- 适用于将相同样式作用于多个同名标签上
类选择器
- 给相应的标签设置
class属性
.类名{
/*CSS样式代码*/
}
- 适用于将样式一次作用在相同类名的标签上
id选择器
- 每个HTML标签都有一个id属性，id属性值必须在本页面是唯一的
#id值{
/*CSS样式代码*/
}
- 适用于将样式作用某个标签上
层级关系
对选择器进行组合，表现出层级关系，从而更加针对性把样式作用于某些标签上
/*选择器1下的选择器2*/
选择器1 选择器2...{
/*CSS样式代码*/
}
常用样式
边框属性
border
/*1像素粗的 实线 红色边框*/
border:1px solid red;
/*
线条形式：
solid 实线
none 无边
double 双线
*/
width
/*宽度300像素*/
width:300px
height
/*高度100像素*/
height:100px
background-color
/*背景颜色红色*/
background-color:red
/*
背景颜色设置主流方式：
1. 英文单词
2. 颜色代码（每一个颜色用16进制位数表示）
*/
布局
/*浮动：居右*/
选择器{
float:right;
}
常用属性值:
none 元素不浮动
left 元素向左浮动
right 元素向右浮动
注意：
设置浮动属性后，会脱离原有的文档流（即原有的板式），从而影响其它元素的样式，所以设置浮动后，页面样式需要重新调整
转换
块元素：以区域块方式出现，每个块标签独自占据一整行或多整行，块结束会自动换行
常见块级元素：
<h1><p><div><ul>
行内元素：根据内容多少来占用行内空间，不会自动换行
- 常见的行内元素
<span><a>
- 常见的行内元素
display属性可以使得元素在行内元素和块元素之间相互转换
选择器{
display:属性值;
}
常用属性值：
block:将元素变为块
inline:将元素变为行内元素
none:此元素将被隐藏，不显示，也不占用空间
字体
/*设置字体大小*/
font-size:
/*设置字体颜色*/
color:
CSS盒子模型
所有的HTML元素都可以看成一个四边形
设置盒子的形式，就是盒子模型
边框(border)
HTML元素盒子的框体
- 上边框（border-top）
- 下边框（border-buttom）
- 左边框（border-left）
- 右边框（border-right）
通用设置(上下左右都设置)：border:1px solid;
内边距(padding)
HTML元素里的内容体到HTML元素边框的距离
- 左边距（padding-left）
- 右边距（padding-right）
- 上边距（padding-top）
- 下边距（padding-buttom）
通用设置：padding:10px;
外边距(margin)
一个HTML元素框体到另一个HTML元素框体的距离
- 上边距（margin-top）
- 下边距（margin-buttom）
- 左边距（margin-left）
- 右边距（margin-right）
通用设置：margin:10px;
CSS与HTML的结合方式
内部样式
在标签内书写style属性
<a style="color：red;">这是一个样式示例</a>
使用style标签，在此标签体内书写CSS样式
<style>
a{
color:red;
}
</style>
外部样式
适用于不同页面的CSS样式复用
抽成一个CSS文件，然后在HTML中调用
如何调用？使用link标签（写在head标签当中）
<link rel="stylesheet" type="text/css" href="css文件路径"/>
<!--
rel属性：固定值，表示样式表
type属性：固定值，表示CSS类型
href属性：表示CSS文件位置
-->
CSS相关知识及入门的更多相关文章
- CSS 相关知识总结
1 什么是CSS? CSS全称(Cascading Style Sheets)是一门指定文档该如何呈现给用户的语言. 2 为何使用CSS? CSS 文档信息的内容和如何展现它的细节想分离,文档细节即为 ...
- CSS相关知识和经验的碎片化记录
1.子DIV块中设置margin-top时影响父DIV块位置的问题 解决办法1:若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法2:在子DIV块 ...
- css相关知识
display: block; "块级元素". display: inline; "行内元素". display: none; "在不删除元素的情况下 ...
- CSS相关知识（持续更新中）
1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- CSS的相关知识——背景，超链接，列表，表格，奇偶选择器
接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色 rgb函数设置 2.background-image 背景图片 url(“logo.jp ...
- Linux入门之安装及相关知识。
一.VMware虚拟机安装与使用 1.1.VMware 简介 VMware是一个虚拟PC的软件,可以在现有的操 作系统上虚拟出一个新的硬件环境,相当于模拟 出一台新的PC.以此来实现在一台机器上真正 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
随机推荐
- Redis单点到集群迁移
目录 一.简介 一.简介 1.环境 源 192.168.1.185的6379 目标 192.168.1.91的7001,7002 192.168.1.92的7003,7004 192.168.1.94 ...
- 添加备注信息（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 就在任务信息的[高级]选项卡隔壁,还有一个[备注]选项卡,可别拿备注不当回事,因为任务名称的字数不能太多. 好吧,张同学也 ...
- 如何把整张表格的数据通过form表单的方式传回后台
开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现 ...
- CF312A Whose sentence is it? 题解
Content \(\texttt{Freda}\) 和 \(\texttt{Rainbow}\) 在网上聊了 \(n\) 句话.我们根据他们聊天的语句的特点来判断每一句是谁说的.\(\texttt{ ...
- java web 404错误页面配置
java web 404错误页面配置:注意红框的地方,在工程的web.xml文件里的最开头加入如下的内容便可,但是也有问题,针对以.action后缀名和.jsp后缀名不起作用, 因为后面配置了一些拦截 ...
- clickhouse配置登录密码
执行 PASSWORD=$(base64 < /dev/urandom | head -c8); echo "123456"; echo -n "123456&qu ...
- cmake以源码的方式引入第三方项目
最前 本文将介绍一种以源码的方式引入第三方库的方法 准备 主项目,需要引用第三方库的某些函数 第三方库,以源码的形式提供给主项目使用 注意: 本文的背景:已经将第三方源码下载好. 一个例子 我这里准备 ...
- java源码——两种格式日期的转换
这里要实现1981.07.30 格式和July 30.1981格式的日期的转换. 在输入时进行日期格式的识别,并且对字符串进行操作并且输出. 难点在于字符串格式的识别和月份的转换,我用了正则表达式匹配 ...
- 【LeetCode】188. Best Time to Buy and Sell Stock IV 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 【LeetCode】778. Swim in Rising Water 水位上升的泳池中游泳（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/swim-in- ...