css属性、样式、边框、选择器
CSS
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，
用来描述 HTML或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素:
HTML标签决定页面上元素的基本结构
CSS 用于设置HTML元素的样式
JavaScript 用于控制页面上的行为
1、CSS属性 ( property )
CSS 属性的基本用法为:
name : value ;
注意:
name表示 CSS 属性(property)名称，不是 HTML 元素的属性(attribute)属性名称 和 属性值 之间 使用 冒号 隔开
每个样式描述结束后，建议以分号结束 ( 分号也是两个不同的样式之间的分隔符 )
比如:
width : 300px ;
某个属性取值中包含多层含义时，属性值的多个部分之间使用空格隔开，比如
border : 1px solid blue ;
其中的 1px 表示边框粗细，solid 表示边框样式，blud 表示边框颜色。
当存在多个属性时，多个属性之间使用冒号隔开:
2、四种用法
在 HTML 文档中使用 CSS 有四种不同的用法，这里分别予以简单介绍。
2.1、内联样式
直接通过元素的 style 属性来指定的样式被称作内联样式 (也有人称作 行内样式 )。
比如:
<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " >
</div>
说的更直接些，就是在开始标签中通过标签的 style 属性(attribute)来指定元素的样式。
必须注意，这里的 style 属性(attribute)是属于 当前元素 的 (即当前标签的)。
2.2、内部样式
所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式。
<style type="text/css"> </style>
这里需要特别注意，style 是一个 HTML 标签，属于HTML范畴，不属于CSS代码。
而在 <style> 和 </style> 之间书写的内容才属于 CSS 代码。
通常建议将 style 元素 添加到 head 元素内部:
<head>
<style type="text/css"> </style>
</head>
也可以根据实际情况来确定 style 元素的位置。
2.3、链接外部样式
通常在 HTML 文档的 head 区域通过 link 标签来链接外部样式文件:
<link rel="stylesheet" href="CSS文件名" type="text/css" charset="字符编码" >
其中:
rel属性必须显式书写，且其属性值必须为stylesheet，否则链接无效href属性用于指定CSS样式文件名type属性是可选的，用于指定被链接文件的 MIME 类型charset属性也是可选的，用于指定被链接文件的字符编码
2.4、导入外部样式
在 head 区域除了通过 link 来链接外部样式文件外，还可以在 <style> 元素导入外部样式:
<style type="text/css">
@import url(CSS文件名);
</style>
注意:
@import和url( )中间至少有一个空格通过
url( )来指定 CSS文件名
3、常用CSS属性
3.1、元素尺寸
元素尺寸设计元素宽度和高度两个属性。
3.1.1、宽度
在CSS代码中通过 width 属性可以控制元素的宽度，其用法为:
width : value ;
比如:
width : 500px ;
宽度取值可以使用 像素为单位 ，也可以使用 百分比，比如:
width : 50% ;
采用百分比时需要注意，元素的实际宽度都是相对于其父元素的宽度来确定的。
3.1.2、高度
在CSS代码中通过 height 属性可以控制元素的高度，其用法为:
height : value ;
3.2、边框
元素的边框涉及属性较多，
不仅涉及 粗细 、风格 、颜色 等属性，
还可以针对某一条边来设置边框的 粗细、风格、颜色 等。
3.2.0、边框阴影
阴影的一个使用特例是卡片效果
实例：
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center;
}水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
div {
box-shadow: 10px 10px 5px grey;
}在 ::before 和 ::after 两个伪元素中添加阴影效果
#boxshadow {
position: relative;
b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
pa dding: 10px;
bac kground: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}box-shadow: 0 0 3px 2px #e2e2e2;/上下平移量，左右平移量，模糊距离，阴影距离，颜色/ transition: all 0.2s;
3.2.1、四周边框
所谓四周边框，就是批量设置四条边的边框，让四条边具有相同样式的边框。
3.2.1.1、四周边框粗细
批量设置四边边框粗细可以通过 border-width 属性来实现:
border-width : width ;
3.2.1.2、四周边框风格
批量设置四边边框风格可以通过 border-style 属性来实现:
border-style : none | solid | double | dotted | ... ;
3.2.1.3、四周边框颜色
批量设置四边边框颜色可以通过 border-color 属性来实现:
border-color : color ;
3.2.1.4、四周边框
批量设置四边边框的 粗细、风格、颜色 可以通过 border 属性来实现:
border : width style color ;
注意 border 属性值的书写顺序:
粗细 ( width )
风格 ( style )
颜色 ( color )
3.2.2、顶部边框
所谓顶部边框，就是单独设置顶部的边框，让顶部边框具有独立的样式。
3.2.2.1、顶部边框粗细
单独设置顶部边框粗细可以通过 border-top-width 属性来实现:
border-top-width : width ;
3.2.2.2、顶部边框风格
单独设置顶部边框风格可以通过 border-top-style 属性来实现:
border-top-style : none | solid | double | dotted | ... ;
3.2.2.3、顶部边框颜色
单独设置顶部边框颜色可以通过 border-top-color 属性来实现:
border-top-color : color ;
3.2.2.4、顶部边框
依次设置顶部边框的 粗细、风格、颜色 可以通过 border-top 属性来实现:
border-top : width style color ;
注意 border-top 属性值的书写顺序:
粗细 ( width )
风格 ( style )
颜色 ( color )
3.2.3、低部边框
所谓低部边框，就是单独设置低部的边框，让低部边框具有独立的样式。
3.2.3.1、低部边框粗细
单独设置低部边框粗细可以通过 border-bottom-width 属性来实现:
border-bottom-width : width ;
3.2.3.2、低部边框风格
单独设置低部边框风格可以通过 border-bottom-style 属性来实现:
border-bottom-style : none | solid | double | dotted | ... ;
3.2.3.3、低部边框颜色
单独设置低部边框颜色可以通过 border-bottom-color 属性来实现:
border-bottom-color : color ;
3.2.3.4、低部边框
依次设置低部边框的 粗细、风格、颜色 可以通过 border-bottom 属性来实现:
border-bottom : width style color ;
注意 border-bottom 属性值的书写顺序:
粗细 ( width )
风格 ( style )
颜色 ( color )
3.2.4、左侧边框
所谓左侧边框，就是单独设置左侧的边框，让左侧边框具有独立的样式。
3.2.4.1、左侧边框粗细
单独设置左侧边框粗细可以通过 border-left-width 属性来实现:
border-left-width : width ;
3.2.4.2、左侧边框风格
单独设置左侧边框风格可以通过 border-left-style 属性来实现:
border-left-style : none | solid | double | dotted | ... ;
3.2.4.3、左侧边框颜色
单独设置左侧边框颜色可以通过 border-left-color 属性来实现:
border-left-color : color ;
3.2.4.4、左侧边框
依次设置左侧边框的 粗细、风格、颜色 可以通过 border-left 属性来实现:
border-left : width style color ;
注意 border-left 属性值的书写顺序:
粗细 ( width )
风格 ( style )
颜色 ( color )
3.2.5、右侧边框
所谓右侧边框，就是单独设置右侧的边框，让右侧边框具有独立的样式。
3.2.5.1、右侧边框粗细
单独设置右侧边框粗细可以通过 border-right-width 属性来实现:
border-right-width : width ;
3.2.5.2、右侧边框风格
单独设置右侧边框风格可以通过 border-right-style 属性来实现:
border-right-style : none | solid | double | dotted | ... ;
3.2.5.3、右侧边框颜色
单独设置右侧边框颜色可以通过 border-right-color 属性来实现:
border-right-color : color ;
3.2.5.4、右侧边框
依次设置左侧边框的 粗细、风格、颜色 可以通过 border-right 属性来实现:
border-right : width style color ;
注意 border-right 属性值的书写顺序:
粗细 ( width )
风格 ( style )
颜色 ( color )
3.4、背景
3.4.1、背景颜色
background-color : color :
默认值为 transparent ( 即透明 )
3.4.2、背景图片
background-image : url( "图片路径" ) :
默认值为 none ( 即没有背景 )
3.4.3、平铺背景图
background-repeat : repeat | repeat-x | repeat-y | no-repeat :
默认值为 repeat ( 即平铺 )
3.4.4、背景图位置
通过
像素或其它单位来设置背景图片的位置
background-position : xpos ypos :
其中的 xpos 表示水平位置，ypos 表示垂直位置。
通过百分比来设置背景图片的位置
background-position : x% y% ;
其中的 x% 表示水平位置，y% 表示垂直位置。
通过单词来设置背景图片的位置
background-position : top left ;
垂直位置使用 top 、center 、bottom 来表示上中下，水平位置使用 left 、center 、right 表示左中右。
当仅仅指定了单个单词时，另一个单词将默认为 center，比如 background-position : top ; 。
background-position 的默认值为 0 0 ( 即默认放在左上角 )
3.4.5、背景图尺寸
在 CSS 中通过background-size 属性规定背景图像的尺寸，其用法为:
background-size : length | percentage | cover | contain ;
其中:
length 表示通过 像素 或 其它单位 来设置背景图像的尺寸
background-size : width height ;
第一个值用于设置宽度，第二个值用于设置高度。
如果只设置一个值，则第二个值会被设置为 "auto" 。
percentage 表示通过百分比来设置背景图像的宽度和高度
background-size : width% height% ;
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
cover 表示用背景图像覆盖整个元素
background-size : cover ;
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain 表示元素内容区域包含背景图像
background-size : contain ;
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
3.4.6、背景图固定方式
背景图像的固定方式有三种:
背景图像置相对于元素本身固定
此时的背景图像会随着包含它的区块一起滚动
此时的背景图像不会随着元素内容的滚动而滚动
这是默认值
背景图像相对于视口(viewport)固定
此时的背景图像不会随着包含它的区块一起滚动
此时的背景图像不会随着元素内容的滚动而滚动
并且仅当视口中显示包含它的区块时才显示该背景
背景图像相对于元素内容固定
此时的背景图像会随着包含它的区块一起滚动
此时的背景图像会随着元素内容的滚动而滚动
背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框
在CSS中通过 background-attachment 属性来控制背景图像的移动方式:
background-attachment : scroll | fixed | local ;
3.4.7、背景图绘制区域
3.4.8、背景图定位区域
4、选择器
选择器 ( selector ) 也称作 选择符，用于在 CSS 中选择页面上的元素，从而为元素设置样式。
选择器可以分为四类十七种，我们将其简化，仅分作两个大类: 基本选择器 、派生选择器 。
4.1、基本选择器
4.1.1、标记选择器
标记选择器 也称作 标签选择器 ，英文中写作 tag selector ，其基本用法为:
tagName {
propertyName : propertyValue ;
...
}
其作用是选择页面上所有匹配于该 tagName 的元素
4.1.2、class选择器
class 选择器 也称作 class 选择符，英文中称作 class selector ，其基本用法为:
.className {
}
其作用是选择页面上 class 属性中 包含 指定 className 的元素。
因为在同一个HTML元素的 class 属性中可以包含 0 ~ n 个 className ，比如:
<div class="success">
在 div 元素的 class 属性中仅使用单个 className
</div>
<p class="first success">
在 p 元素的 class 属性中指定两个 className
</p>
<span class="flag success test">
在 span 元素的 class 属性中指定三个 className
</span>
因此通过 .success 就可以选择以上代码中的 div 、p、span 元素:
.success {
color : red ;
}
另外注意:
将 这里的 class selector 翻译成 类选择器 ，将 className 翻译成 类名 是及其不合适的。
应该大胆地鄙视这种说法、勇敢地去纠正这种说法。
4.1.3、属性选择器
属性选择器 也称作 属性选择符，英文中称作 attribute selector 。其基本用法为:
[attributeName] {
}
其作用是根据 HTML 元素的属性来选择相应的元素。
属性选择器的用法比较多，以下表格中列举了部分属性选择的用法和作用。
我们仅学习较为常用的三种: [attributeName]、[attributeName=value]、[attributeName~=value]。
4.1.3.1、[attributeName]
[attributeName] 形式的属性选择器用于选择 拥有attributeName属性 的 HTML 元素。
比如对于以下HTML元素来说:
<form action="http://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form
[type]可以选择两个input元素，因为它们都拥有了type属性[type]无法选择form元素，因为form元素不拥有 type 属性
使用 [attributeName] 形式的属性选择器选择元素时需注意:
仅关注元素是否拥有指定
attributeName对应的属性与属性的属性值无关 ( 即不考虑该属性的属性值 )
4.1.3.2、[attributeName=value]
[attributeName=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值仅等于指定值 的 HTML 元素。
比如对于以下 HTML 元素来说:
<div class="wrapper first odd"></div>
<div class="wrapper second even"></div>
<div class="wrapper"></div>
使用 [class=wrapper] 可以选择以上三个div元素中的最后一个元素，而不能选择前两个元素。
因为只有最后一个div元素的 class 属性取值等于 wrapper，
另外两个div元素的 class属性中只能说是包含 wrapper 。
所以这里要注意:
采用 [attributeName=value]形式的属性选择器选择HTML元素时，元素的属性值必须是等于指定值。
4.1.3.3、[attributeName~=value]
[attributeName~=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值包含指定值 的 HTML 元素。
比如对于以下 HTML 元素来说:
<div class="wrapper first odd"></div>
<div class="wrapper second even"></div>
<div class="wrapper"></div>
使用 [class~=wrapper] 选择以上三个div ，此时的 [class~=wrapper] 作用与 .wrapper 是相同的。
4.1.4、ID选择器
4.1.4.1、元素编号
与现实生活中每个人拥有一个唯一的公民身份号码(身份证编号)一样，
在HTML页面上每个元素都应该有一个惟一的编号，浏览器可以通过这个编号来管理该元素。
这个编号就是 元素编号，也称作 元素标识符 ( element identifier )
元素编号可以通过元素的 id 属性来指定:
<div class="wrapper" id="first">
<input type="text" name="wd" id="wd" >
<input type="submit" value="百度一下" id="button-baidu" >
</div>
<div class="wrapper" id="second">
<input type="text" name="q" id="q" >
<input type="submit" value="360搜索" id="button-360" >
</div>
作为元素标识符，我们应该尽力保证 id 属性取值的惟一性。
4.1.4.2、id selector
id 选择器 也称作 id 选择符，英文中称作 id selector ，其基本用法为:
#elementId {
}
其作用是选择页面上 id 属性中 等于 指定值的元素。
4.1.5、通配选择符（universal selector）
在CSS中一个星号(*)就是一个通配选择器，它可以匹配任意类型的HTML元素。
其用法为:
* {
}
4.1.6、伪类 ( pseudo-class )
伪类( pseudo-class ) 向某些选择器添加特殊的效果，其基本用法为:
selector:pseudo-class {
property : value ;
}
注意 selector:pseudo-class 中间的 : 前后不可以有任何空白字符。
伪类( :pseudo-class ) 可以表示某个选择器( selector ) 所选择元素的某种状态，比如:
老马:没钱 { }
老马:有钱 { }
其中通过 老马 选择一个或多个人，用 :没钱 和 :有钱 来选择这些人的状态。
在CSS代码中:
.first:hover {
background-color : red ;
}
通过 .first 可以命中页面上所有的 class 属性中包含 first 的元素，
通过紧跟其后的 :hover 可以为这些元素设置当鼠标悬浮时呈现的效果(鼠标悬浮时背景颜色为红色)。
另外需要特别说明一下:
伪类(pseudo-class)需要结合一个已经存在的选择器来使用，比如 .wrapper:hover 。
常用伪类( pseudo-classes ):
:link表示超链接未被访问时的状态:visited表示超链接被访问后的状态:hover表示鼠标悬浮到元素上:active表示超链接处于激活状态所谓激活状态就是鼠标左键在超链接上按下但未释放时的状态
使用 :link 、:visited 、:hover 、:active 修饰超链接时需要注意:
:hover必须被置于:link和:visited之后才是有效的:active必须被置于:hover之后，才是有效的
5、优先级
在以下列表中，选择器类型的优先级是递增的：
Type Selectors
标记选择器 ( tag selector ) ( 例如
div、h1)伪元素选择器 ( 例如
::before、::after）
Class Selectors
class selector ( 例如
.wrapper)属性选择器 ( attribute selector )（例如
[type=text]）伪类选择器（例如
:hover、：focus）
ID选择器
例如
#first、#test
以下选择器对优先级没有影响:
通配选择符( universal selector)（
*）关系选择符( combinators )
关系选择符包括
+、>、~、(空格)、||
否定伪类( negation pseudo-class) (
:not())但是，在
:not()内部声明的选择器会影响优先级
元素的 内联样式 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。
css属性、样式、边框、选择器的更多相关文章
- 【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
- 点赞功能实现 $(tag).css('属性', '样式')
1. 创建标签 document.createElement() 2.$(tag).css('属性', 样式) 赋予标签属性样式 3.设置定时器 改变位置 大小 <!DOCTYPE html&g ...
- 如何确定要对DIV设置什么CSS属性样式呢？
设置什么CSS样式不是凭空想象的而是有参考的,一般分三种情况下得到需要知道设置什么样式. 第一种:没有美工图,自己边思考布局 这种没有美工图也没有可参考的情况下DIV CSS布局,根据自己实际构思的想 ...
- CSS属性（边框）
1.边框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
- 前端入门4-CSS属性样式表
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- 《Head First HTML与CSS》的CSS属性
关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- vue实现首屏加载等待动画 避免首次加载白屏尴尬
0 直接上效果图 1背景,用户体验良好一直是个重要的问题. 2怎么加到自己项目里面? 复制css html代码到自己的index.html即可 代码链接 源码地址 Vue学习前端群493671066, ...
- Python 文件拼接
# -*- coding:utf-8 -*- import re import csv file = open('make_setup.cfg', 'w+') with open("tyb. ...
- Salesforce 学习 | 官方总结最实用的Spring '20新功能
在Spring '20正式发布之前,Trailblazers 社区举行了一个名为Treasure Hunt的在线活动,通过预览沙盒,分享他们认为Spring ‘20中最重要的功能.这篇文章就来盘点一下 ...
- 实现一个简单的基于动态代理的 AOP
实现一个简单的基于动态代理的 AOP Intro 上次看基于动态代理的 AOP 框架实现,立了一个 Flag, 自己写一个简单的 AOP 实现示例,今天过来填坑了 目前的实现是基于 Emit 来做的, ...
- 使用 selenium 实现谷歌以图搜图爬虫
使用selenium实现谷歌以图搜图 实现思路 原理非常简单,就是利用selenium去操作浏览器,获取到想要的链接,然后进行图片的下载,和一般的爬虫无异. 用到的技术:multiprocessing ...
- 7.关于一些dom&&获取元素
1. 测试点击的是否是span 标签 <span onClick={this.select.bind(this)}>点击</span> select( e ){ cons ...
- 使用mysqlbinlog查看二进制日志
(一)mysqlbinlog工具介绍 binlog类型是二进制的,也就意味着我们没法直接打开看,MySQL提供了mysqlbinlog来查看二进制日志,该工具类似于Oracle的logminer.my ...
- redis： Set集合类型（五）
Set里面的值是不能重复的 Set设置值(头部):sadd myset hello Set获取值:smembers myset 检查Set是否包含某个元素:sismember myset hello ...
- 它来了！它来了！Seata Go Client 它来了！！！
抱歉抱歉,这个标题一看就是个很标题党的标题.本文所述的 Seata Go Client 只支持 TCC 模式,并不像 Java 版的能支持到 AT 模式.SAGA 模式.XA 模式,聊胜于无.说到这里 ...
- 理解java容器底层原理--手动实现ArrayList
为了照顾初学者,我分几分版本发出来 版本一:基础版本 实现对象创建.元素添加.重新toString() 方法 package com.xzlf.collection; /** * 自定义一个Array ...