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基础知识 属性和选择的更多相关文章

  1. CSS样式基础知识

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

  2. HTML+CSS+JS基础知识

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

  3. 前端三件套 HTML+CSS+JS基础知识内容笔记

    HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...

  4. css 3d 基础知识

    css3d 总结 3d transform (3D变形)(rotate skew scale translate) 基础知识 perspective (视距,景深) perspective-origi ...

  5. css入门基础知识

    一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...

  6. web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式

    1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...

  7. CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片

    CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...

  8. css的基础用法之标签选择

    一.css的4种引入方式 #.内联式 <p style="color: red;font-size: 50px;text-align: center">Egon是一个非 ...

  9. css的基础知识1

    总结:css引用:1内联:在标签中加style属性,<标签名 style="样式1:样式值1:样式2:样式值2"> </标签名>.2.内嵌:在head标签中 ...

随机推荐

  1. 关于HC04超声波模块测距的思考（51版）

    之前写过一篇HC04的使用文章,当时是使用stm32来实现的,原文链接. 后来又多次使用51来驱动这个模块,有时候有测距需要,使用了几次,总是感觉我上次那个程序不是很好, 所以这次对它进行了改进.虽然 ...

  2. R语言︱贝叶斯网络语言实现及与朴素贝叶斯区别（笔记）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 一.贝叶斯网络与朴素贝叶斯的区别 朴素贝叶斯的 ...

  3. linux下mount/unmount命令

    格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有:-a 安装在/etc/fstab文件中类出的所有文件系统.-f 伪装mount,作出检查设备和目录的样子,但并不真正挂载文件系 ...

  4. jquery.lazyload.js实现图片懒加载

    个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...

  5. 如何高效的使用PowerShell备份数据库

    初始脚本 Get-SqlDatabase -ServerInstance localhost | Where { $_.Name -ne 'tempdb' } | Backup-SqlDatabase ...

  6. python实现列表倒叙打印

    def func(listNode): listNode.reverse() for i in listNode: print(i) li = [1,2,3,4,5] func(li) 利用pytho ...

  7. xml文件的规则

    一,规则 1.1,样本 <?xml version="1.0" encoding="utf-8"?> <contactList> < ...

  8. 手机端仿ios的三级联动脚本四

    二,脚本 <script> $("#city-picker").cityPicker({ title: "选择省市区/县", onChange: f ...

  9. Spring 之BeanFactory(转)

    BeanFactory是Spring的“心脏”.它就是Spring IoC容器的真面目. Spring使用BeanFactory来实例化.配置和管理Bean.但是,在大多数情况我们并不直接使用Bean ...

  10. Python网络爬虫 | Scrapy爬取妹子图网站全站照片

    根据现有的知识,写了一个下载妹子图(meizitu.com)Scrapy脚本,把全站两万多张照片下载到了本地. 网站的分析 网页的网址分析 打开网站,发现网页的网址都是以 http://www.mei ...