这两天看了前端css的部分内容,真心让我难受,太多的属性记不住,唉!!所以才想着把笔记记录一下,方便以后用到查看。
CSS 指的是层叠样式表,定义了如何显示html属性,样式通常存储到样式表中。
外部样式表通常存储在css文件中:多个样式可层叠为一个。
css的基础语法:
css规则是由两个主要部分组成:选择器,以及一条或多条声明。
选择器一般是需要改变样式的html元素:每个声明由一个属性和一个值组成。属性是希望设置的样式属性,每个属性有一个值,属性和值用冒号分开。
h2 {color :red;font-size:14px;} ----------将h2元素内的文字颜色定义为红色,同时字体大小设置为14px
属性值除了英文表示外,还可以使用16进制表示
当使用RGB百分比时,当值为0时,也需要写百分号,其他情况不需要。
p {color:rgb(100%,0%,0%);}
**如果值为若干个单词,需要加引号:
p{font-family:"sans serif";}
**多重声明:就是有几个声明,如下所示:
p{
text-align:center; ------每行只描述一个属性,增加样式的可读性
color :black;
font-family: arial;
}
css 高级语法:
选择器的分组:对选择器进行分组,使被分组的选择器分享相同的声明,用逗号分开选择器。例如:
h2,h3,h4,h5,h6,h7{
color:green;
}
**css派生选择器是通过根据元素在其位置的上下文关系来定义样式的。
**id选择器
id选择器是为标有特定id的html元素指定特定的样式,id选择器以#定义
#red {color:red;}
#green {color :green;}
id选择器和派生选择器的关系:
1.id选择器用于建立派生选择器
#sidebar p{
font-style:italic;
text-align:right;
margin-top:0.5em;
}
#sidebar h3{
font-size:1em;
font-weight:normal;
font-style:italic;
margin:0;
line-height:1.5;
text-align:right;
}
此时,sidebar中的p和h3有别与其他地方的此标签元素。该位置的标签元素做了特殊处理。
2.id选择器单独使用:
#sidebar {
border:1px dotted #000;
padding :10px;
}
**类选择器
类选择器是以 点号显示的:
.center {text-align:center;}
***类名的第一个字符不能为数字
类选择器也可以用作派生选择器:
.fancy td {
color:#f60;
background:#666;
}
**属性选择器
对带有指定属性的html元素设置样式,不仅限与class和id属性
1.属性选择器:
[title]
{
color:red;
}
2.属性和值选择器:
[title=hw]
{
border:5px solid blue;
}
3.属性和值选择器 ----多个值 title 中只要包含hello字符就设置样式
[title ~=hello] {color :red;}
[lang | =en] {color:red;}
***设置表单的样式,属性选择器在不带class和id的表单设置样式很有用
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family:Verdana,Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family:Verdana,Arial;
}
css样式的创建:插入css样式的方法有三种:
1.外部样式表:
当样式需要应用与许多的页面时,采用外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
-----从外部引用一个css文件的样式声明来格式文档
2.内部样式表:
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
3.内联样式:(慎用)
当样式需要在一个元素上应用一次时可以采用,但是慎用,因为表现和内容混杂在一起,内联样式容易损失掉样式表的许多优势
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
4.多重样式:
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来
外部样式表:
h4{
color:red;
text-align:left;
font-size:8pt;
}
内部样式表:
h4 {
text-align: right;
font-size: 20pt;
}
color: red;
ext-align: right;
font-size: 20pt;
***当外部和内部样式表都有共同的属性时,颜色属性被继承于外部样式表,而文字排列和字体尺寸会被内部样式表中的规则取代
css的背景:
可以应用纯色作为背景,也可以使用背景图像创建相当复杂的效果
使用background-color 属性数字背景色,可以接收任何合法的颜色值
p {
background-color:green;
}
background-color 不能被继承,默认值是transparent 透明的意思
背景图像:
将图像放入背景中,使用background-image 属性,默认值为none,表示没有放任何图像
**如果需要设置一个背景图像,必须为这个属性设置一个url值:
body {background-image: url(/i/eg_bg_04.gif);}
background-image 不能被继承,所有的背景属性都不能被继承
背景重复:
如果需要在页面上对背景图像进行平铺,可使用background-repeat属性
repeat属性导致图像在水平垂直方向上平铺,repeat-x和repeat-y分别导致图像只在水平和垂直方向上重复,no-repeat 不允许图像在任何方向上平铺
默认背景图像从一个元素的左上角开始:
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
背景定位:
利用 background-position 属性改变图像在背景中的位置
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
关键字:top、bottom、left、right和center以及使用长度值,如100px、5cm
关键字通常会成对出现,如果只出现一个关键字,则另一个是center
背景关联:
如果文档比较长,当文档向下滚动时,背景图像也会滚动,当文档滚动超过图像的位置时,图像消失。
background-attachment属性防止这种滚动,通过这个属性,可以声明图像相对于可视区是固定的(fixed)。
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是scroll 。默认情况下,背景随着文档滚动
**css的背景属性:
background 背景属性设置在一个声明中
css文本
css的文本属性是对文本的外观进行操作,如改变颜色、大小、字符的缩进等
缩进文本:
text-indent 属性
p {text-indent :5em;}
一般来说,该属性可以为所有块级元素应用,但是无法应用与行内元素,图像之类的替换元素也无法应用该属性。
不过,如果一个块级元素的首行中有一个图像,则会随着该行的其余文本移动。
如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果
使用负值: 可以实现“悬挂缩进”,即第一行悬挂在元素中余下部分的左边
p {text-indent:-5em;}
如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界,为了避免该问题,需要再设置一个外边距或一些内边距:
p {text-indent:-5em; padding-left:5em;}
使用百分比值:
百分数相对于缩进元素父元素的宽度。如果缩进了20%,其父元素宽度也会缩进20%
div {width:500px;}
p {text-indent:20%;}
<div>
<p>this is a paragragh</p>
</div>
继承:text-index可以被继承
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
***水平对齐:
text-align属性
属性值:left、right、center
<CENTER>不仅影响文本,还会把整个元素居中,text-align 不会控制元素的对齐,只会影响内部内容
justify 是两端对齐方式属性
***字(单词)间隔
word-spacing 属性可以改变字之间的标准间隔,默认值是normal 与0 一样的含义
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加,反之,则拉近
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
letter-spacing 属性是字母间隔,是数字和字母之间的间隔
h2 {letter-spacing: -0.5em}
h5 {letter-spacing: 20px}
<h2>This is header 1</h2>
<h5>This is header 4</h5>
***字符转换:
text-transform 属性 处理文本的大小写
属性值:none ---无任何操作
uppercase ---全大写
lowercase --全小写
capitalize ---只对每个单词的首字母大写
h2 {text-transform: uppercase} ---对h2元素的内容全大写
***文本装饰:
text-decoration 属性 ------它的值会替换而不是累积
属性值: none --去掉本来的装饰,恢复默认
underline --对元素加下划线
overline ---在文本的顶端画一个上划线
line-through 在文本中间画个贯穿线
blink ----让文本闪烁
可以结合多种装饰使用;例如:
a:link a:visited {text-decoration: underline overline;} --超链接既有下划线,又有上划线
***处理空白符:
white-space 属性 可以处理字之间和文本行之间的空白符的方式
<p>This paragraph has many
spaces in it.</p>
p {white-space: normal;}
***当 white-space 属性设置为 normal 时,会合并所有的空白符,并忽略换行符
属性值:
pre ----浏览器不会合并空白符,也不会忽略换行符
nowrap -----防止元素中的文本换行,除非使用了一个 br 元素
pre-wrap ----浏览器不仅会保留空白符并保留换行符,还允许自动换行
pre-line ----浏览器会保留换行符,并允许自动换行,但是会合并空白符(和pre-wrap的区别)
***文本方向:
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充元素框的方向、以及两端对齐元素中最后一行的位置
对于行内元素,只有当unicode-bidi 属性设置为embed或bidi-override 时才会应用direction 属性
属性值:ltr和rtl ;;;默认值是ltr,显示从左到右文本。rtl是从右往左显示
css文本属性:
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
css字体
定义了文本中字体的大小、粗细、风格等
font-family 属性定义文本的字体
body {font-family: sans-serif;}
font-style 属性 ---设置斜体文本
属性值:normal ---文本正常显示
italic --文本斜体显示
oblique --文本倾斜显示
字体变形:
font-variant 属性 设定小型大写字母 ---不同大小的大写字母
p {font-variant:small-caps;}
字体加粗:
font-weight 属性设置文本的粗细
属性值:bold 粗体
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小:
font-size 设置文本的大小
***如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)
css字体属性:
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
css链接:
链接的四种状态:
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
规则:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
text-decoration 属性大多用于去掉链接中的下划线
background-color 属性规定链接的背景色
css列表:
css列表属性允许放置、改变列表项的标志,或者将图像作为列表项标志
列表类型:影响列表的样式,最简单的方法是改变其标志类型
修改列表项的标志类型:list-style-type属性
ul {list-style-type : square}
列表项图像:
对各标志使用图像:list-style-image属性
ul li {list-style-image : url(xxx.gif)}
列表标志位置:list-style-position属性
简化列表样式:
list-style属性
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值
css表格
改善表格的外观
表格边框:
border属性
table, th, td
{
border: 1px solid blue;
}
如果需要把表格显示为单线条边框,请使用 border-collapse 属性
折叠边框:
border-collapse 属性将表格边框折叠为单一边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
***如果没有规定 !DOCTYPE,border-collapse 属性可能会引起意想不到的错误
表格的宽度和高度:
width和height ---宽度和高度
table
{
width:100%;
}
th
{
height:50px;
}
表格的文本对齐:
text-align 和 vertical-align 属性设置表格中文本的对齐方式
text-align 是水平对齐
vertical-align 是垂直对齐
表格的内边距:
控制表格中内容和边框的距离,为td和th设置padding属性:
td
{
padding:15px;
}
表格的颜色:
table, td, th
{
border:1px solid green;
}
th
{
background-color:green; --背景颜色
color:white;
}
css Table属性:
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
css轮廓:
轮廓outline 是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。css outline 属性规定元素轮廓
的样式、颜色、宽度
css 边框属性:
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
css框模型
css框模型规定了元素框 处理元素的内容、内边距、边框和外边距的方式
border 边框
margin 外边距
padding 内边距
element 元素
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景
内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,不会遮挡其后的任何元素。
背景是由内容和内边距以及边框组成的区域;内边距、边框和外边距是可选的,默认是零。可以通过设置内外边距为零来覆盖浏览器样式
* {
margin: 0;
padding: 0;
}
在css中,width和height是指元素内容的宽度和高度,增加内外边距和边框不会影响内容的尺寸,但是会增加元素框的总尺寸
内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边
外边距可以是负值,而且在很多情况下都要使用负值的外边距
边框内的空白是内边距,边框外的空白是外边距
1.css 内边距
内边距是边框内的空白部分,即元素内容到边框之间的空白部分,使用padding属性,可以接受长度值和百分比值,但是不能是负值
h2 {padding: 10px;} ---为h2所有边设置10px的内边距
也可以按照上、右、下、左的顺序分别设置内边距
h2 {padding: 10px 0.25em 2ex 20%;} ----简写规则
单边内边距的属性:
padding-top
padding-right
padding-bottom
padding-left
padding 作用是在一个声明中设置元素的所内边距属性
h2 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
内边距可以设置百分比值,并且这个百分比值是根据其父元素的width计算的。同时改变
****上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度
css边框
元素的边框是围绕元素内容和内边距的一条或多条线
可以设置元素边框的样式、宽度和颜色
border-style属性定义了10个不同的非inherit 样式;包括none
定义一个图片:
a:link img {border-style: outset;}
为一个边框定义多种样式:
p.aside {border-style: solid dotted dashed double;}
定义单边样式:
p {border-style: solid solid solid none;} 《=====》 p {border-style: solid; border-left-style: none;}
边框的宽度:
border-width 属性指定
指定宽度有两种方法:
1.指定长度值;2.使用关键字,thin、medium(默认)和thick
p {border-style: solid; border-width: 5px;}
或
p {border-style: solid; border-width: thick;}
定义单边宽度:
按照上右下左的顺序设置元素各边边框:
p {border-style: solid; border-width: 15px 5px 15px 5px;}
或者简写:
p {border-style: solid; border-width: 15px 5px;}
可以通过下面属性设置边框各边宽度:
border-top-width
border-right-width
border-bottom-width
border-left-width
边框宽度设置值:
none ---无边框
solid
outset
***当属性值border-style设置为none时,即没有边框,所以之前不管你定义的是什么,都会消失。包括任何样式
由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式
边框的颜色:
border-color属性设置
它一次可以最多接收4个颜色值,如果小于四个,则值赋值会起作用
边框颜色默认是元素本身的前景色,如果没有为边框声明颜色,将与元素的文本颜色相同。如果元素没有任何文本,
则它的边框颜色是其父元素的文本颜色,这个父元素可能是body、div等
定义单边颜色:--和定义宽度属性一样
border-top-color
border-right-color
border-bottom-color
border-left-color
透明边框:
border-color:transparent ---创建不可见边框
css外边距
围绕着元素边框的空白区域是外边距
设置外边距使用margin属性,该属性可以接受任何长度单位,百分数值甚至负值
margin 可以设置auto,更常见的是为外边距设置长度值
h2 {margin : 0.25in;}
内边距属性值设置百分比值也是相对应父元素的width计算的。
使用值赋值的规则:
如果缺少左外边距的值,则使用右外边距的值。
如果缺少下外边距的值,则使用上外边距的值。
如果缺少右外边距的值,则使用上外边距的值。
单边外边距属性:
margin-top
margin-right
margin-bottom
margin-left
margin 在一个声明中设置所有外边距属性
css 外边距合并
外边距合并指当两个垂直外边距相遇时,他们将形成一个外边距。合并之后的外边距的高度等于两个发生合并的外边距的高度较大者
css定位:
css定位属性允许你对元素进行定位
使用display 属性改变生成框的类型。display=block 可以让行内元素表现的像块级元素一样。
display=none 让生成的元素根本没有框
当把一些文本添加到一个块级元素的开头,即使没有把文本定义为段落,也会当作段落来对待
<div>
some text ------------------无名块框
<p>Some more text.</p>
</div>
ss 定位机制:普通流、浮动、绝对定位
所有框都在普通流中定位。
css position 属性:
static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中
relative 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留 ---相对定位
absolute 元素框从文档流完全删除,并相对于其包含块定位;包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,
就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框 --绝对定位
fixed 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身 ---固定定位
css定位属性:
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
css 相对定位:
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
*****在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框
css 绝对定位:
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
css绝对定位使元素与文档流无关,因此不占据空间
***相对定位是相对于元素在文档中的初始位置,而绝对定位是相对于最近的已定位祖先元素,如果不存在祖先元素,那么相对于最初的包含块
css 浮动:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样
float 属性
行框和清理
要想阻止行框围绕浮动框,需要对该框应用 clear 属性
属性值:left、right、both和none
表示框的哪些边不应该挨着浮动框
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页标题:CSS的基础知识1-创新互联
分享URL:https://www.cdcxhl.com/article34/heise.html
成都网站建设公司_创新互联,为您提供域名注册、网站维护、网站建设、微信公众号、网站排名、网站设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联