css基础知识
html的基本标签都是千篇一律的，为了能够个性化外观，就需要进行样式的调整，而css就是专门用来维护，管理样式的一种格式。在html中定义css有三种方法
1. 为标签添加style属性，这样的话样式只应用于这个标签：
<h1 style="属性:属性值;属性2:属性值;"></h1>
2. 在文件头的<head>里面加上<style type="text/css">标签，标签里面以css的格式写样式，这些样式对整个html文件有效：
<head>
<style type="text/css">
标签名{
属性:属性值;
属性2:属性值;
}
</style>
</head>
3. 关联外部既存的css文件
比如在<head>中添加<link rel="stylesheet" href="..." type="text/css">:
<head>
<link rel="stylesheet" href="../static/css/test.css" type="text/css">
</head>
外部的css文件中就是按照css的格式写的样式代码，如：
标签名{
属性:属性值
属性2:属性值
}
标签名2{
属性:属性值
属性2:属性值
}
以上示例中写的标签名，意思就是其作用范围内所有这个标签都要应用其定义的样式，这仍然不是很灵活，需要更灵活的定义应该诉诸于选择器，下文中会再提及。
■ css基本属性
● 背景
background-color:gray; 设置背景色 更多颜色名称参见http://www.w3school.com.cn/cssref/css_colornames.asp
background-image:url(文件路径) 设置背景图片
background-repeat:repeat-x or repeat-y or no-repeat 设置背景是否照水平or垂直方向重复平铺or不平铺
background-position:center 设置背景图片所处位置，可选的值有很多，参见http://www.w3school.com.cn/css/css_background.asp
background-attachment:fixed or scroll 设置背景图片是否随着页面滚动而滚动，fixed的话就是说背景图固定在可视界面内不动
● 文本
color
direction:ltr or rtl (right to left) 设置文本方向
text-indent:10% or 5em 设置文本缩进，意思是说设置了这个属性的元素，其子元素并不显示在其最左边而是最左边加上这段缩进值的距离（1em = 16px）
text-align:center or left... 设置文本对其，和<center>不同，这里的对其是指文本相对其父元素的对齐方式，而center是把整个元素相对于页面对齐
word-spacing:20px... 设置文字间距
text-transform:uppercase or lowercase or capitalize or none 设置文字的大小写
text-decoration:underline or line-through or none 设置文本划线，可以上划线下划线删除线以及none（比如你想让所有超链接不要有下划线，就可以设置a的css中令text-decoration:none）
● 字体
font-family:... 设置字体（家族），字体家族是说字体有很多相似的家族，系统好像会自带一些家族，属于这些家族的字体都可以直接拿来用
font-style:normal or italic 正常or斜体
font-weight:bold or normal 粗体or正常
font-size = 15px 设置字体大小，也可以用em等单位(1em = 16px)
● 链接
在html中链接有四种状态，分别是 a:link（普通，未访问的链接）,a:visited（已被访问的链接）,a:hover（鼠标位于链接上方时）,a:active（链接被点击时）
可以对不同状态的链接进行不同的CSS设置：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
● 表格
标签从table,tr到th,td都可以设置下面这些属性
border:1px solid blue 设置边框样式（默认情况下双边框，即单元格和表格有各自的边框，如果不要双边框可以调整border-collapse属性）
width，height:px或百分比 设置表格、单元格的宽和高，可以是百分比
text-align和vertical-align 设置某个单元格或表格全体的水平、垂直对齐
padding:px或百分比 设置内容距离单元格边框的距离（包括上下左右）
● 透明度
在css3中有属性opacity:0.5这样的形式来调整一个元素的透明度。1是100%不透明，0是全透明，用小数来调整即可
■ 框模型和边框
html中有一套框模型来表现元素的位置（主要用来搞清楚margin和padding的区别）：
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
在css里设margin和padding，只有一个数值是默认上下左右全部都应用这个数值。但是如果想要灵活地控制不同的边有不同的值的话可以单独设置 margin/padding-top, margin/padding-right等等
关于边框的设置：
border-width:像素 设置边框宽度
border-style:solid or dotted or dashed等等 设置样式，如果不同边想应用不同样式可以border-bottom-style , border-left-style等等，下面属性也类似
border-color 设置边框颜色
以上三个属性可以通过border:1px solid black;这样的方式来一次性设置
■ 元素选择器
正如上面说到过的，css中直接写标签名的样式个性化粒度不够细，要做到更细致的选择，应该用元素选择器的语法。这里的选择器语法跟jQuery中用的选择器语法是一样的
元素选择器的意思就是通过一定的语法规则写成的表达式，让其可以指定一部分的元素。
● 多项选择
如果想让所有标题标签都应用同一个样式，那么可以h1,h2,h3,h4,h5,h6{...}，即用逗号隔开元素代表多项选择
● 通配选择
就是*号，*{...}会把相关样式应用到所有元素上，.class *{...}的样式会应用到所有含class类的元素的所有子元素上
● 类选择
匹配有class属性的元素，方法是.class
.class{...}的css将应用于所有class属性设置成"class"的元素。类选择可以和标签名选择结合起来：p.class就是选择所有class配置成"class"的p元素。类选择还可以累计，而累计的类选择只匹配同时包含那些类的元素，比如.class1.class2{...}将选择属性class="class1 class2 [或者更多内容]"的元素。
● id选择
id选择看的是元素的id属性。方式是#id。id和class不同，一个页面中一种元素的每个实例的id应该都是互不相同的。所以id定位更加精细一些。同类选择类似，可以有p#id这样的表达。但是不能有#id1#id2的表达。
● 属性选择器
其实class和id也是元素的两个属性而已。如果要选择其他属性的值的话也可以，但是需要指出属性的名称：
[attribute="value"]来定位某个含有attribute属性，且其值为value的元素，和上述类似的可以有p[attribute="value"]的表达。
如果不写等号和后面的东西，就是选择含有这项属性的元素（不管其值是什么都选择）
除了写等号，也可以写^=,$=,*=分别表示attribute的开头是"value",结尾是"value"以及attribute中包含"value"。
另外还需要注意的一点是，value必须和原文中的一模一样，比如元素有 attribute = "value1 value2"的话，[attribute="value1"]是匹配不到的，要[attribute="value1 value2"]
● 后代元素选择 & 子元素选择
比如有时候我想让在某个div下的某些p的样式做出变化，这样的话就需要搞一个双重的条件。多重条件就可以考虑一个后代元素的选择，其方式是空格：
div.container p#name{...}的意思就是选择class=="container"的div里面的id=="name"的p，将后面定义的css应用到这个（或者说这种）p元素上。当然，这种p肯定是这种div的后代元素了
如果不需要后代元素这么庞大的概念，只需要子元素这一层（不要孙元素及以下）,那么方式就改成>。比如div.container > p#name{...}这样的话就只会找div下一层的p而不找更下面的了
● 同辈元素选择
和后代元素类似的，+号选择的是之前定位到的元素的后一个同辈元素，和后代元素选择类似的不再多说
● 伪类选择
伪类是html内置的一些，用于标识元素状态的标志。在选择器中用:来选择，比如之前提过的超链接的几个状态的设置，就有a:normal , a:visited等，这些就是伪类了。除了a的那四个，还有诸如first-letter,first-line之类的伪类可以用。（注意，hover这些伪类并不一定只有a可以用，其他标签如img等也可以用哦）
【CSS】 CSS基础知识 属性和选择的更多相关文章
-
CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
-
HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
-
css 3d 基础知识
css3d 总结 3d transform (3D变形)(rotate skew scale translate) 基础知识 perspective (视距,景深) perspective-origi ...
-
css入门基础知识
一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...
-
web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式
1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...
-
CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片
CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...
-
css的基础用法之标签选择
一.css的4种引入方式 #.内联式 <p style="color: red;font-size: 50px;text-align: center">Egon是一个非 ...
-
css的基础知识1
总结:css引用:1内联:在标签中加style属性,<标签名 style="样式1:样式值1:样式2:样式值2"> </标签名>.2.内嵌:在head标签中 ...
-
CSS动画基础知识
CSS动画就是通过CSS (Cascading Style Sheet,层叠样式表)代码搭建的网页动画.它允许设计师和开发人员通过编辑网站的CSS代码来添加页面动画,从而轻松取代传统动画图片或flas ...
随机推荐
-
文件大boss
1.write() 写命令 f=open("a2.txt",'w',encoding='utf-8') f.write() f.close() 2.closed 判断是否是关闭 ...
-
Form1和Form2的交互
比如在第二个窗体中操作第一个窗体中的TreeView,动态添加节点和子节点. ------回答--------- ------其他回答(20分)--------- 尽量不要这样做.控件,窗体,你在.n ...
-
免费公测：RDS只读实例
免费公测:RDS只读实例 简要介绍 在对数据库有少量写请求,但有大量的读请求的应用场景下,单个实例可能无法抵抗读取压力, 甚至对主流程业务产生影响.为了实现读取能力的弹性扩展,分担数据库压力,阿里 ...
-
详解googe Chrome浏览器（理论篇）
开篇概述 1详解google Chrome浏览器,这个标题似乎抽象了一些,我想应该把它拆分成如下几个问题,也许会更加理解一些. 问题1:目前开发中,主选浏览器有Google Chrome,IE,Fir ...
-
axios formData提交数据 &;&; axios设置charset无效？？？
但是这样会出现一个问题,什么问题呢? 我设置了请求头编码utf-8,但是没生效 content-type里面没有出现utf-8???????查了很多资料,说这是axios固有的bug,我....... ...
-
nginx-web身份验证
1.配置文件设置: server { listen 80; server_name www.longshuai.com www1.longshuai.com; location / { root /w ...
-
linux 获取随机数的办法
1.1.1 inux随机数的办法 http://www.2cto.com/kf/201410/342717.html 方法一.[root@ob ~]# date +%N %N纳秒 随机获取的九位 ...
-
实验吧Crypto题目Writeup
这大概是一篇不怎么更新的没什么用的网上已经有了很多差不多的东西的博客. 变异凯撒 忘记了2333 传统知识+古典密码 先查百度百科,把年份变成数字,然后猜测+甲子的意思,一开始以为是加1,后来意识到是 ...
-
vue js moment.js 过滤了双休日和法定节假日
源码:注!原创的!!!! <template> <div id="DATE"> <ul class="dateForm" @cha ...
-
利用Python Counter快速计算出现次数topN的元素
需要用Python写一段代码,给定一堆关键词,返回出现次数最多的n个关键字. 第一反应是采用一个dict,key存储关键词,value存储出现次数,如此一次遍历即可得出所有不同关键词的出现次数,而后排 ...