css基础标签学习

一：选择器

选择器：{ 属性名：属性值 }

css选择器的应用,css选择器主要运用在内联样式中.body中书写的内容,由css内联样式style设置body命名的标签.给其标签样式 在选择标签的样式时，运用到选择器。

选择器主要分为：元素标签选择器，类选择器，id选择器。组合选择器：多元选择器，后代元素选择器，子选择器，相邻元素选择器，属性选择器。这些选择器主要是对命名的标签进行样式。

二：伪类选择器

重要的选择器：伪类选择器。主要对超链接进行央视。什么是超链接呢。说白了，就是鼠标悬浮时显示的效果。主要有4个标签

a:link（未访问的链接状态）,用于定义了常规的链接状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:active（在链接上按下鼠标时的状态）。

a:visited（已访问过的链接状态）,可以看出已经访问过的链接。

2. :before、:after

p:before 在每个<p>元素的内容之前插入内容;

p:after 在每个<p>元素的内容之后插入内容。       优先级：id>类>元素

三：css导入方式

行内样式：<style  type ="text /css"></style> 直接写在标签内部写样式，在head内部写样式。

外联样式：<link rel=" stylesheet " href=" css / style. css " >新建个css文件夹，把样式写在css文件夹中，href 指引的方向是css文件夹的方向，标记的是css的命名。

@import url(“url”)一般写在要要导入css的第一行，否则有的浏览器会忽略。

优先级：（!import>）行内>内联>外联（>@import）

(!import谨慎使用，一般不用)

<link>  1、属于XHTML    2、优先加载CSS文件到页面   @import 1、属于CSS2.1       2、先加载HTML结构在加载CSS文件。

四：常用属性

1.颜色属性：color

十六进制写法：color：#FFFF0000。红绿蓝写法：color.rgb( 100% 100% 0%) 。 字体透明度写法：color.rgb( 255, 255,0,0.5){第四个数值设置的是透明度}。全透明：color: transparent。元素透明：opacity，语法：opacity，{属性值从0到1，0全透明，1不透明。}

2.字体属性：font

font-size：字体大小。例如：font-size：15px。

font-style：字体样式。例如：font-stytle：normal ，正常显示，italic  文本斜体显示  oblique  文本倾斜显示。

font-weight：字体粗细。例如：font-weight ；normal（默认）：bold（加粗）；bolder（相当于<strong>和<b>标签）；  lighter （细） ；100 ~ 900 整百（400=normal，700=bold）

font-family：文字字体。例如：font-family：“微软雅黑”

line-height：字体行高。例如：line-height：30px

font简写：font：字体大小 / 行高 / 字体

3.文本属性

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

normal：默认处理方式。

pre：保留空格，当文字超出边界时不换行

nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签

pre-wrap：保留空格，当文字碰到边界时换行

pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

ltr 默认，文本方向从左到右。

rtl 文本方向从右到左。

text-alingn：文字水平对齐方式

left

center

right

line-height：文字行高

normal 默认

    可自己设置高度例：line-height:30px;当高度与行高相等时，文字垂直居中。

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

baseline 默认

sub 垂直对齐文本的下标，和<sub>标签一样的效果

super 垂直对齐文本的上标，和<sup>标签一样的效果

top 对象的顶端与所在容器的顶端对齐

text-top 对象的顶端与所在行文字顶端对齐

middle 元素对象基于基线垂直对齐

bottom 对象的底端与所在行的文字底部对齐

text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本首行缩进

    用于一段文字首行缩进，例:text-indent:30px;

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

    设置字母之间的距离，例：letter-spacing:5px;表示各字母之间相距5px。

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

    值为数值型，单位px。

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

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母，全部转化为大写字母。

lowercase 定义仅有小写字母，全部转化为小写字母。

text-overflow: 文本溢出样式

clip 修剪文本。

ellipsis 显示省略符号...来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。

 

text-decoration: 文本的修饰

none 默认。

underline 下划线。

overline 上划线。

line-through 中线。

text-shadow：文本阴影

第一个参数是左右位置

第二个参数是上下位置

第三个参数是虚化效果

第四个参数是颜色

text-shadow: 5px 5px 5px #888;

word-wrap：词组自动换行

word-wrap: break-word;

4. 背景属性

background 背景属性

background-color: 背景颜色

       英文

       十六进制

       rgba(red,green,blue,透明度)

       透明度取值范围0-1之间

       r,g,b取值范围0-255之间

       rgb(red,green,blue)

background-image背景图片

background-image:url('img/girl1.jpg');

注意：默认重复铺满

background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-repeat 背景重复

no-repeat 设置图像不重复，常用

repeat-y => y轴重复

repeat-x => x轴重复

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

x轴距离

       y轴距离

       格式：background-position: x轴距离 y轴距离;

支持英文单词

              center

              left

              right

              top

              bottom

background-position: center center; 图片置中，x轴center，y轴center

background-size背景大小

       格式：background-size: 宽度 高度;

cover 等比例铺满, 如果显示比例和显示区域的比例相差很大某些部分会不显示。

contain：正好相反，他是按照某一边来覆盖显示区域的，可能会留空白。

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; 

square;  方框

circle;  空心圆

upper-alph; & disc; 实心圆

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

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

inside

outside

list-style：缩写

   

   页面布局

1. 边框

border => 边框线

border:粗细 样式 颜色

           粗细 => px

           样式 => solid => 实线

                         dashed => 虚线

                         double => 双实线

                         dotted => 点状虚线

border-width：边框宽度  单位px;

border-style：边框样式

solid 默认，实线

double 双线

dotted 点状线条

dashed 虚线

border-color：边框颜色

border: 简写

border: 2px yellow solid;

border-left:粗细 样式 颜色 => 左边框线

border-right:粗细 样式 颜色  => 右边框线

border-top:粗细 样式 颜色  => 上边框线

border-bottom:粗细 样式 颜色  => 下边框线

border-radius：圆角

1个参数：四个角都应用

2个参数：第一个参数应用于 左上、右下；第二个参数应用于 左下、右上

3个参数：第一个参数应用于 左上；第二个参数应用于 左下、右上；第三个参数应用于右下

4个参数：左上、右上、右下、左下（顺时针）

box-shadow：边框阴影

第一个参数是左右位置

第二个参数是上下位置

第三个参数是虚化效果

第四个参数是颜色

box-shadow: 10px 10px 5px #888;

盒子
模型：padding，margin

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

display：

none 不显示。

block 显示为块级元素。

inline 显示为内联元素。

inline-block 行内块元素（会保持块元素的高宽）。

list-item 显示为列表元素。

 visibility

visible 元素可见

hidden 元素不可见

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

 

   float 浮动

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

none

left 左浮动

right 右浮动

clear 清除浮动：

none  :  默认值。允许两边都可以有浮动对象

left   :  不允许左边有浮动对象

right  :  不允许右边有浮动对象

both  :  不允许两边有浮动对象

• clip 剪裁图像

rect 剪裁定位元素：

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

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

• visible 默认值，内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
•  
• position 规定元素的定位类型
• static默认值，没有定位，遵从正常的文档流
• relative相对定位元素，相对于其正常位置进行定位，遵从正常的文档流
• absolute绝对定位元素，脱离正常文档流
• fixed绝对定位元素，固定在浏览器某处

• 通过以下四种属性进行定位：

• left
• top
• right
• bottom
• z-index

•  z-index  元素层叠顺序
• z-index 仅在定位元素上有效（例：position:absolute;）
• 可以指定负数属性值（例：-1;）

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

• cursor 鼠标的类型形状

/*cursor: default;*/

                            /*横向双箭头*/

                            /*cursor: e-resize;*/

                            /*左下->右上切斜的双箭头*/

                            /*cursor: ne-resize;*/

                            /*纵向水平双箭头*/

                            /*cursor: n-resize;*/

                            /*左上->右下双箭头*/

                            /*cursor: se-resize;*/

                            /*左下->右上切斜的双箭头*/

                            /*cursor: sw-resize;*/

                            /*纵向水平双箭头*/

                            /*cursor: s-resize;*/

                            /*横向双箭头*/

                            /*cursor: w-resize;*/

                            /*鼠标悬浮成十字状*/

                            /*cursor: crosshair;*/

                            /*显示小手*/

                            /*cursor: pointer;*/

                            /*十字交叉箭头*/

                            /*cursor: move;*/

                            /*I*/

                            /*cursor: text;*/

                            /*加载圈滚动*/

                            /*cursor: wait;*/

                            /*问号*/

                            /*cursor: help;*/

                            /*禁止  红圈斜杠*/

                            cursor: not-allowed;