css基础

css基础：样式表，控制网页内容的外观，设置样式时可将内容与表现形式分离

1、组成和格式

（1）组成：选择器+声明

选择器：通过名字来标识某个元素（元素名/类名/id名）

声明：用于定义元素样式（属性名：属性值）

（2）格式

     选择器{属性名：属性值；属性名，属性值；……}

2、使用方式

（1）行内样式表：style属性（style=“”）

     直接写在某个元素里面

（2）内部样式表：style标签<style></style>，对一部分整体进行操作

（3）外部样式表：<link rel="stylesheet" href="" type=“text/css”/>

     把所有样式写在一个文件里面，然后再通过link的方式引入

（4）导入(基本不用了，了解就好)：@url("test.css");

3、基础选择器（优先级：ID>CLASS>元素>通配符*）

（1）id选择器：#id名{属性名：属性值；}

（2）class选择器：.class名{属性名：属性值；}

（3）标签选择器：标签名{属性名：属性值；}

     （选中某个标签）

（4）通配符：*{属性名：属性值；}

     （操纵页面内的所有元素）

P.S.css样式表的执行顺序是从上到下，如果优先级相同，那么下面的样式效果会覆盖上面的

4、常用样式

（1）color:字体颜色;

     <1>没有默认值

     <2>可以使用颜色名称、RGB、RGBA、十六进制数来指定颜色

         颜色名称：{color:green;}

         RGB:{color:rgb(数值,数值,数值);}表示由红绿蓝三种颜色拼出

         RGBA:{color:rgba(数值,数值,数值,数值);}最后一个数值表示的是透明度，0是完全透

         明，1是完全不透明，这个透明度的数值要在0~1之间

         十六进制数：{color:#十六进制数}

（2）font-family:字体样式;

（3）text-align:文字内容的显示格式（center、left、right）;

     只对块级元素有效

（4）background-color:背景颜色;

     <1>默认值是透明transparent

     <2>内部样式表优先级>html元素的属性

        内部样式表优先级<行内样式表

（5）background-image：背景图片

     <1>默认值是none（没有图片）

     <2>通过url(“图片路径”)指定图片

     <3>如果是为某一小节如<div>设置背景的话一定要定义具体的width和height

当同时定义了背景图像和颜色时，背景图像会覆盖在背景颜色之上

（6）background-repeat:背景图片是否重复

     <1>默认值是repeat（重复）

     <2>属性值

         repeat-x:图片在横向上平铺

         repeat-y:图片在纵向上平铺

         no-repeat:不重复平铺

（7）background-size:背景图片大小

     <1>默认值是auto（真实大小）

     <2>属性值

         length：用长度指定背景图片大小，不允许负值

         percentage：用百分比指定图片大小，不允许负值

    .img{background-size:宽px 高px}：宽和高两个都指定的话图片很有可能变形，所以指定其中

    一个就好

（8）background-attachment:背景图片是否随内容滚动

     <1>默认值是scroll（会滚动）

     <2>属性值

         fixed：背景图像相对于窗体固定，滚动条、页面元素滚动但图像不动，容器会消失

         scroll：滚动条动会跟着动

（9）background-position：背景图片位置（相对于外层容器）

     <1>默认值是0% 0%，效果等同于left top（置于左上角）

     <2>使用此属性必须要先指定background-image属性

         如果提供两个值（像素/百分比），第一个用于横坐标，第二个用于纵坐标：

             background-position（后面可以接方位值、像素、百分比）:right bottom;

         如果只提供一个值，该值用于横坐标，纵坐标默认为50%

（10）border:1px solid green;为元素添加边框，设置1像素宽，实线，绿色

（11）opacity：设置颜色透明度

     <1>默认值1

         1为不透明，0为完全透明

     <2>如果在页面中想将背景变为透明，而里面的内容不受影响，最好使用rgba，因为opacity

     会继承到内容中

（12）font-style：是定文本的字体样式（正常、斜体）

     <1>默认值是normal

     <2>属性值

         normal：正常字体

         italic：斜体字

（13）font-weight:指定文字的粗细（实际上只有粗体和正常字体两种效果）

     <1>默认值是normal

     <2>属性值

         nomal：正常字体

         lighter：细体（作用效果和normal没有区别）

         bold：粗体，相当于number为700

         bolder：粗体

     以数字表示粗细，范围100~900（600以下是正常字体，600以上是粗体，并且只能是整百）