一、CSS语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

例如:

h1 {color:red; font-size:14px;}

二、CSS四种引入方式

1,行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

<p style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>hello yuan</p>

2,嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

1 <head>
2 <meta charset="UTF-8">
3 <title>Title</title>
4 <style>
5 p{
6 background-color: #2b99ff;
7 }
8 </style>
9 </head>
 

3,链接式

将一个.css文件引入到HTML文件中

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4,导入式

将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:

<style type="text/css">

          @import"mystyle.css"; 此处要注意.css文件的路径

</style> 

注意:

导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

样式应用顺序:

  • 行内样式优先级最高
  • 针对相同的样式属性,不同的样式属性将以合并的方式呈现
  • 相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属
  • !important

    指定样式规则应用最优先

选择器(Selector)

基本选择器:

1.通用元素选择器

* 表示应用到所有的标签。

1
* {color: yellow}

2.标签选择器

匹配所有使用 div 标签的元素(可以匹配所有标签)

1
div {color: yellow}

3.类选择器

匹配所有class属性中包含info的元素。

语法:.类名{样式}(类名不能以数字开头,类名要区分大小写。)

1
2
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>

4.ID选择器

使用id属性来调用样式,在一个网页中id的值都是唯一的(是W3C规范而不是规则,所以不会报错)。

语法:#ID名{样式}(ID名不能以数字开头)

1
2
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>

  

组合选择器:

1.多元素选择器

同时匹配h3,h4标签,之间用逗号分隔。

1
2
3
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>

2.后代元素选择器

匹配所有div标签里嵌套的P标签,之间用空格分隔。

1
2
3
4
5
6
7
8
    div p {color: yellow;}
 
<div>
    <p>Nick</p>
    <div>
        <p>Nick</p>
    </div>
</div>

3.子元素选择器

匹配所有div标签里嵌套的子P标签,之间用>分隔。

1
2
3
4
5
6
    div > p {color: yellow;}
 
<div>
    <p>Nick</p>
    <p>Nick</p>
</div>

4.毗邻元素选择器

匹配所有紧随div标签之后的同级标签P,之间用+分隔(只能匹配一个)。

1
2
3
4
    div + p {color: yellow;}
 
<div>Nick</div>
<p>Nick</p>

  

属性选择器:

1.[title] & P[title]

设置所有具有title属性的标签元素;

设置所有具有title属性的P标签元素。

1
2
3
4
5
6
7
8
9
10
11
    [title]
    {
        color: yellow;
    }
    p[title]
    {
        color: yellow;
    }
 
<div title>Nick</div>
<p title>Nick</p>

2.[title=Nick]

设置所有title属性等于“Nick”的标签元素。

1
2
3
4
5
6
    [title="Nick"]
    {
        color: yellow;
    }
 
<p title="Nick">Nick</p>

3.[title~=Nick]

设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。

1
2
3
4
5
6
7
    [title~="Nick"]
    {
        color: yellow;
    }
 
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>

4.[title|=Nick]

设置所有title属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"Nick"开头的标签元素。

例:lang属性:"en"、"en-us"、"en-gb"等等

1
2
3
4
5
6
    [title|="Nick"]
    {
        color: yellow;
    }
 
<p title="Nick-Jenny">Nick</p>

5.[title^=Nick]

设置属性值以指定值开头的每个标签元素。

1
2
3
4
5
6
    [title^="Nick"]
    {
        color: yellow;
    }
 
<p title="NickJenny">Nick</p>

6.[title$=Nick]

设置属性值以指定值结尾的每个标签元素。

1
2
3
4
5
6
    [title$="Nick"]
    {
        color: yellow;
    }
 
<p title="JennyNick">Nick</p>

7.[title*=Nick]

设置属性值中包含指定值的每个元素

1
2
3
4
5
6
    [title*="Nick"]
    {
        color: yellow;
    }
 
<p title="SNickJenny">Nick</p>

  

伪类选择器:

1. link、hover、active、visited

  • a:link(未访问的链接状态),用于定义了常规的链接状态。
  • a:hover(鼠标放在链接上的状态),用于产生视觉效果。
  • a:active(在链接上按下鼠标时的状态)。
  • a:visited(已访问过的链接状态),可以看出已经访问过的链接。
1
2
3
4
5
6
    a:link{color: black}
    a:hover{color: yellow}
    a:active{color: blue}
    a:visited{color: red}
 
<a href="#">Nick</a>

2. before、after

  • P:before 在每个<p>元素的内容之前插入内容;
  • P:after 在每个<p>元素的内容之后插入内容。
    p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
} <p> Nick </p> 

常用属性

1. 颜色属性:

  color

  • HEX(十六进制色:color: #FFFF00 --> 缩写:#FF0)
  • RGB(红绿蓝,使用方式:color:rgb(255,255,0)或者color:rgb(100%,100%,0%))
  • RGBA(红绿蓝透明度,A是透明度在0~1之间取值。使用方式:color:rgba(255,255,0,0.5))
  • HSL(CSS3有效,H表示色调,S表示饱和度,L表示亮度,使用方式:color:hsl(360,100%,50%))
  • HSLA(和HSL相似,A表示Alpha透明度,取值0~1之间。)

  transparent

  • 全透明,使用方式:color: transparent;

  opacity

  • 元素的透明度,语法:opacity: 0.5;
  • 属性值在0.0到1.0范围内,0表示透明,1表示不透明。
  • filter滤镜属性(只适用于早期的IE浏览器,语法:filter:alpha(opacity:20);)。

2. 字体属性:

  font-style: 用于规定斜体文本

  • normal  文本正常显示
  • italic  文本斜体显示
  • oblique  文本倾斜显示

  font-weight: 设置文本的粗细

  • normal(默认)
  • bold(加粗)
  • bolder(相当于<strong>和<b>标签)
  • lighter (常规)
  • 100 ~ 900 整百(400=normal,700=bold)

font-size: 设置字体的大小

  • 默认值:medium
  • <absolute-size>可选参数值:xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
  • <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值:smaller、 larger
  • <percentage>百分比指定文字大小。
  • <length>用长度值指定文字大小,不允许负值。

font-family:字体名称

  • 使用逗号隔开多种字体(优先级从前向后,如果系统中没有找到当前字体,则往后面寻找)

 font简写属性

  • 语法:font:字体大小/行高 字体;(字体要在最后)

3. 文本属性:

white-space: 设置元素中空白的处理方式

  • normal:默认处理方式。
  • pre:保留空格,当文字超出边界时不换行
  • nowrap:不保留空格,强制在同一行内显示所有文本,直到文本结束或者碰到br标签
  • pre-wrap:保留空格,当文字碰到边界时换行
  • pre-line:不保留空格,保留文字的换行,当文字碰到边界时换行

direction: 规定文本的方向 

  • ltr 默认,文本方向从左到右。
  • rtl 文本方向从右到左。

text-align: 文本的水平对齐方式 

  • left
  • center
  • right

line-height: 文本行高

  • normal 默认

vertical-align: 文本所在行高的垂直对齐方式

  • baseline 默认
  • sub 垂直对齐文本的下标,和<sub>标签一样的效果
  • super 垂直对齐文本的上标,和<sup>标签一样的效果
  • top 对象的顶端与所在容器的顶端对齐
  • text-top 对象的顶端与所在行文字顶端对齐
  • middle 元素对象基于基线垂直对齐
  • bottom 对象的底端与所在行的文字底部对齐
  • text-bottom 对象的底端与所在行文字的底端对齐

  text-indent: 文本缩进

  letter-spacing: 添加字母之间的空白

  word-spacing: 添加每个单词之间的空白

text-transform: 属性控制文本的大小写

  • capitalize 文本中的每个单词以大写字母开头。
  • uppercase 定义仅有大写字母。
  • lowercase 定义仅有小写字母。

text-overflow: 文本溢出样式

  • clip 修剪文本。
  • ellipsis 显示省略符号...来代表被修剪的文本。
  • string 使用给定的字符串来代表被修剪的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden; overflow 属性规定当内容溢出元素框时发生的事情
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 小亮亮 </div>
</body>

text-decoration: 文本的装饰

  • none 默认。
  • underline 下划线。
  • overline 上划线。
  • line-through 中线。

 text-shadow:文本阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • text-shadow: 5px 5px 5px #888;

word-wrap:自动换行

  • word-wrap: break-word;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 150px;
height: 160px;
background-color: #FFA500;
/*边框阴影*/
box-shadow: 10px 10px 5px #888;
/*自动换行 对b不起影响*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<div>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</div>
<h1>小亮亮</h1>
</body>
</html>
a {
text-decoration: none;
/*去除a标签下划线*/
}

去除a标签下划线

. 背景属性 

  背景颜色

  background-image 设置图像为背景

  • url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png");  图片地址
  • background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

  background-position 设置背景图像的位置坐标

  • background-position: center center; 图片置中,x轴center,y轴center
  • 1px -195px  截取图片某部分,分别代表坐标x,y轴

  background-repeat 设置背景图像不重复平铺

  • no-repeat 设置图像不重复,常用
  • round 自动缩放直到适应并填充满整个容器

  • space 以相同的间距平铺且填充满整个容器

  background-attachment 背景图像是否固定或者随着页面的其余部分滚动

  background 简写

  • background: url("o_ns.png") no-repeat 0 -196px;
  • background: url("o_ns.png") no-repeat center bottom 15px;

  • background: url("o_ns.png") no-repeat left 30px bottom 15px;

 

5. 列表属性

  list-style-type: 列表项标志的类型

  • none 去除标志
  • decimal-leading-zero;  02.
  • square;  方框
  • circle;  空心圆
  • upper-alph; & disc; 实心圆

  list-style-image:将图象设置为列表项标志

  list-style-position:列表项标志的位置

  • inside
  • outside

  list-style:缩写

*页面布局*

1. 边框 

  border-style:边框样式

  • solid 默认,实线
  • double 双线
  • dotted 点状线条
  • dashed 虚线

 border-color:边框颜色

border-width:边框宽度

  border-radius:圆角

  • 1个参数:四个角都应用
  • 2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
  • 3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
  • 4个参数:左上、右上、右下、左下(顺时针)

  border: 简写

  • border: 2px yellow solid;

box-shadow:边框阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • box-shadow: 10px 10px 5px #888
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
</style>
</head>
<body>
<div>
点赞哦!dear.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
} .triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-stree"></div>
<div class="triangle-four"></div>
<div class="triangle-five"></div>
<div class="triangle-six"></div>
<div class="triangle-seven"></div>
<div class="triangle-eight"></div>
</body>
</html>
</body>
</html>

实现三角形

2.★  盒子模型

  一个标准的盒子模型:

padding:用于控制内容与边框之间的距离;

    margin: 用于控制元素与元素之间的距离;

padding、margin 表示上右下左都应用
padding-top、margin-top
padding-right、margin-right
padding-bottom、margin-bottom
padding-left、margin-left

    

一个参数,应用于四边。

  两个参数,第一个用于上、下,第二个用于左、右。

  三个参数,第一个用于上,第二个用于左、右,第三个用于下。

边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子,外层还有html,
在默认情况下,body距离html会有若干像素的margin,所以body中的盒子不会紧贴浏览器窗口的边框了。 解决方法:
body {
margin: 0;
}

浏览器窗口最外层边框缝隙

3.★  display

  • none 不显示。
  • block 显示为块级元素。
  • inline 显示为内联元素。
  • inline-block 行内块元素(会保持块元素的高宽)。
  • list-item 显示为列表元素。

 

4. visibility

  • visible 元素可见
  • hidden 元素不可见
  • collapse 当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。

5.★  float 浮动

让一行显示两个块级标签,会脱离文档流

  • none
  • left 左浮动
  • right 右浮动

clear 清除浮动:

  • none  :  默认值。允许两边都可以有浮动对象
  • left   :  不允许左边有浮动对象
  • right  :  不允许右边有浮动对象
  • both  :  不允许两边有浮动对象

6. clip 剪裁图像

rect 剪裁定位元素:

  • auto 默认值,无剪切
  • 上-右-下-左(顺时针)的顺序提供四个偏移值
  • 区域外的部分是透明的
  • 必须指定 position:absolute;
  • 例:clip:rect(0px,60px,200px,0px);

7. overflow  设置当对象的内容超过其指定高度及宽度时如何显示内容

  • visible 默认值,内容不会被修剪,会呈现在元素框之外。
  • hidden 内容会被修剪,并且其余内容是不可见的。
  • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

              

8.★  position 规定元素的定位类型

static

默认值,没有定位,遵从正常的文档流

relative

相对定位元素,相对于其正常位置进行定位,遵从正常的文档流

absolute

绝对定位元素,脱离正常文档流

fixed 绝对定位元素,固定在浏览器某处
    通过以下四种属性进行定位:
  • left
  • top
  • right
  • bottom
  • z-index

9. z-index  元素层叠顺序

    • z-index 仅在定位元素上有效(例:position:absolute;)
    • 可以指定负数属性值(例:-1;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
</body>
</html>

10. outline 边框轮廓

  • outline-width 轮廓宽度
  • outline-color 轮廓颜色
  • outline-style 轮廓样式

11. zoom 缩放比例 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
</style>
</head>
<body>
<div class="zoom1">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>

前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作的更多相关文章

  1. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

  2. CSS最基础的语法和三种引入方式

    **CSS语法** CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.选择器通常是您需要改变样式的 HTML 元素. selector {declaration1; declaration ...

  3. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  4. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  5. CSS的四种引入方式

    1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...

  6. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  7. CSS文件的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  8. CSS 文件的4种引入方式

    (1)链接式  : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css  (用得比较多) : < ...

  9. CSS布局的四种定位方式

    1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...

随机推荐

  1. 读写方式 r , r+ , w , w+ , a , a+

    r只读,r+读写,不创建:r+:可读可写,若文件不存在,报错 w如果文件已经存在,则不替换: w 就是打开文件,文件如果不存在,就会新建一个文件: w+: 可读可写,若文件不存在,创建 信息来源:ht ...

  2. P1325 雷达安装

    传送门 思路: 采取贪心的思想. 把每个岛屿看作圆心,以雷达的范围 d 为半径,求出与 x 轴的左右两个交点,两交点所夹的区间就需要放置一个雷达,这样就把这道题转换为了区间取点问题.在枚举岛屿时,记录 ...

  3. Axure 页面内多组内容切换的实现 + 利用一个内联框架实现百度地图访问

    Axure  页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面 操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号.手机账号.邮箱账号时 ...

  4. MongoDB基本增删改查

    一. 在Node中如何操作 MongoDB数据  1.使用官方的 mongodb 来操作:https://github.com/mongodb/node-mongodb-native  2.使用第三方 ...

  5. 强化git

    [场景1]git 提交本地代码到远程master 1.git init 2.git add . 3.git commit -m " " 4.git remote add origi ...

  6. Lua 语言环境安装

    Linux 系统上安装(本文使用了5..0版本进行安装:) curl -R -O http://www.lua.org/ftp/lua-.tar.gz tar zxf lua-.tar.gz cd l ...

  7. 常用模块Part(1)

    collections模块 time模块 random模块 os模块 sys模块 collections模块 这个模块实现了一些很好的数据结构,它们能帮助你解决各种实际问题 在这里主要介绍几种数据结构 ...

  8. centos安装ruby

    下面开始安装Ruby 一.下载Ruby源码包 wget ftp://ftp.ruby-lang.org/pub/ruby/2.1/ruby-2.1.7.tar.gz 二.解压安装Ruby tar zx ...

  9. python操作redis集群

    strictRedis对象方法用于连接redis 指定主机地址,port与服务器连接,默认db是0,redis默认数据库有16个,在配置文件中指定database 16 上代码 .对redis的单实例 ...

  10. selenium 常用操作

    官方文档: https://selenium-python.readthedocs.io/api.html#selenium.webdriver.remote.webdriver.WebDriver. ...