4.9 CSS基础入门

首先咱们来说一下选择器，大致可以分为三种 ：

p {     color: red; } /*标签选择器 作用于当前页面素有匹配标签*/ .green{     color: red; } /*类选择器 作用于当前页面所有class值为green的标签*/#color{    color: red;} /*id选择器 在当前页面具有唯一性*/

css的写法：分三类优先级：行内样式>内部样式>外部样式以上效果的实现要符合“就进原则”

<p>    电脑 <span style="color: red;font-size: 40px">1</span>元起    <!-- 1行内样式： 样式只在当前标签可用，写法比较繁琐，这种写法要极力避免--></p>

    
<style>    price{        color: #red;    }</style>
<p>    电脑 <span id="price">1</span>元起    <!-- 2内部样式： 只在当前页面，比行内写法要好一些。缺点：多个页面无法共用一个样式--></p>

(<link rel="stylesheet" href="prices"/>) 表引用外部样式表

<p>

     电脑 <span id="prices">1</span> 元起    <!-- 外部样式表：推荐写法！ 样式可以复用，做到了文本样式的分离--></p>

以上是样式的基本用法

一些基本属性用法

font-family: "隶书","仿宋","sans-serif";/*前面字体族名称 最后一个是类族名称浏览器在显示字体的时候，依次判断是否支持当前的字体，直到最后的字体系列*//*font-family："隶书","仿宋",sans-serif*/font-weight: bolder;/*bold 加粗  bolder更粗   lighter 细体*/font-size: 30px;/*font-size 取值：具体的px值，2：百分比（默认字体大小16px）*/font-style: inherit;/*字体的显示格式*/color: red;/*字体颜色*/opacity: 0.1;/*透明度0是全透 1是正常值*/

line-height: 70px;/*行高 单行字体占用的高度 px  %通过设置文本的行高与外部容器高度一致，可以实现文本垂直居中*/text-align: justify;/*justify 两端对齐 right=end 右对齐  left=start 左对齐（默认） center 居中*/letter-spacing:normal;/*字符间距： px  normal */text-decoration: underline;/*文本修饰 上划线 中划线 下划线*/
overflow:hidden;white-space: nowrap;text-overflow: ellipsis;/*三个属性配合实现单行超出文本隐藏*/text-shadow: 2px 2px #c9ff3a;/*文本阴影颜色 x方向的偏移 y方向的偏移  阴影的颜色*/-webkit-text-stroke: 2px #fff8ba;/*/!*文本面变颜色 描边的宽度 描边的颜色*!/*/text-indent: 2em;/*悬挂缩进*/
background-color: white;/*背景颜色*/background-image: url("../img/logo_kouhao.png");/*背景图添加方式*/background-repeat: no-repeat;/*背景图片的展示方式*/background-position: 160px 130px ;/*背景图片的位置*/background-size: contain;/*背景图片的大小contain: 图片宽高等比例缩放，直到款或高填满父布局，可能出现图片填充布局不完整cover: 图片宽高等比例缩放，直到较小的宽或高填满父布局，可能出现图片溢出。*/