css的一些基础方法

  1.css样式表分别有:

  内联样式表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title><style> //这个是内联样式表<style></style>这里面可以书写css样式</style></head><body> <div style="这个也是内联样式表"></div></body></html>

  外部样式表

<link rel=“stylesheet” type=“text/css” href=“路径” />
外部样式表是从新创建一个专门的css文件在通过路径去链接

  2.css选择符

  选择符{属性:属性值;属性:属性值;}  例:  div{width:200px;height:100px;background:red; }  每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值  属性必须放在花括号中,属性与属性值用冒号连接。  每条声明用分号结束。  当一个属性有多个属性值的时候,属性值与属性值用空格分隔。  在书写样式过程中,空格、换行等操作不影响属性显示。

  3.css选择符

 元素选择符也可以叫类型选择符:
  例:
     <div> <header> <nav> <footer> <figure> ...

  通配符    例:       *(号选择所有)   id选择符:    例:       <div id="这个就是id选择符是写在标签里面的"></div>(id=“
里面的可以随便写比如a/b/s/xdv/sv/等但必须要写在双引号里面才可以”)   class选择符:    例:       <div class="这个就是class选择符跟id选择符是一样都必须要写在双引号里面"></div>   群组选择符:    例:    

    div , .hehe , p , #top {background:red;}  同时对多个选择符设置同一个样式 选择符与选择符之间用逗号分隔

  后代选择符:     例:       #nav   ul   li {background:red;}       缩小范围去选择元素 选择符与选择符之间用空格分隔   伪类选择符:     例:         a:link {属性:属性值;} 初始化状态         a:visited {属性:属性值;} 被点击后的状态         a:hover {属性:属性值;} 当鼠标滑过时候的状态         a:active {属性:属性值;} 当鼠标按下时候的状态         伪类选择器只能给特殊的带有href属性的a标签使用 并且只有在特殊的条件下才会有效果  

  4.选择符的优先级

选择符的优先级即选择符的权重 针对同一个元素或同一群元素 进行选择时起的冲突进行的优先选择的处理。 内联样式的权重为 1000 id选择符的权重为 0100 class选择符的权重为  0010 伪类选择符的权重为   0010 元素选择符的权重为   0001 继承样式的权重为 0000 后代选择符的权重:为后代选择符的权中之和 

  5.文本的属性

  文本大小及单位

  文本大小 (设置字体的大小 通常网页字体为12px或14px)  font-size:12px;  单位 (通常单位为像素)  px像素 pt点 em倍距  3pt=4px  em是根据自身的字体大小来决定多少像素  元素的默认大小是16px  1em=16px

  文本的属性

 font-style:normal/ italic [设置文本为斜体] font-weight:normal(100-500)/ bold(600-900) [设置文本为粗体] font-family: “文本字体1”,”文本字体2”; [文本类型] text-align:left/center/right/justify [文本水平对齐方式] vertical-align:top/middle/bottom[垂直对齐方式] line-height:数字px;[设置文本在一行内的高度] 设置文本简写方式 font:加粗 倾斜 文本大小/行高 “字体”;

  文本的颜色

 颜色属性十六进制值#f00 #fa0000 red颜色模式:光色模式  R      G      BFF      00     00
当然除了这个还可以用一些对应的单词

  文本修饰

text-decoration 文本修饰none:没有修饰underline:添加下划线overline:添加上划线line-through:添加删除线text-indent 首行缩进

  6.背景的设置

背景颜色background-color:#f00;背景图片background-image:url(图片路径);背景图片平铺属性background-repeat:repeat 默认平铺repeat-x 横向平铺repeat-y 纵向平铺no-repeat 不平铺背景图位置background-position:值1(水平) 值2(垂直)left/center/right/数值     top/center/bottom/数值数值可以设置负值背景简写:background:颜色 图片路径 是否平铺 位置;小扩展常用图片格式jpg (图片有损质量 但肉眼难分辨 来减小图片大小 图片非搂空使用);png (图片有损质量 但肉眼分辨不出 来减小图片大小 搂空图片使用的格式)gif (图片有损严重 肉眼容易分别 常用与做动图)

  7.浮动属性

float:none 默认不浮动left 左浮动right 右浮动

  8.列表li相关独有属相

list-style-type[设置列表符号] disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);list-style-image:url(路径); [自定义图片列表符号]list-style-position:outside(默认外边)/inside(里边);[定义符号所在位置]list-style:none;去掉列表符号 

 

  

 

相关文章