HTML基础css基础

1.css的引入方式（优先级：行内>导入，外链，内嵌(谁写在最接近body标签谁优先级高)）

       行内样式：通过style属性

                 标签添加color，font-size属性等

                         列：<h1 style="color: pink;font-size: large;">我的</h1>

       

       内嵌样式：通过style标签

                 写在head里添加style标签

                         <style>

                                 h1{                         /*对body里面的h1标签进行设置样式属性*/

                                     color: blueviolet;

                                     font-size: 20px;

                                          }

                             </style>

       

       外链样式：通过link标签

                 单独的一个.css文件

                 通过link标签<link rel="stylesheet" href="">(href链节.css文件地址)写在head的位置里面

       导入样式：通过@import url(""),需放到style标签里

                 在head的标签里添加

                         style标签

                                  @import url("")<!--URL地址斜线需要改为/ -->

                 列：

                         <style>

                             @import url();

                         </style>

2.选择器

       

       基本选择器：标签选择器，ID选择器，类选择器，通用选择器（写的位置head里style标签或外链css文件）

                 优先级：ID选择器》class选择器》标签选择器》通用选择器

                 标签选择器：通过标签的名称进行获取

                         style标签里面对需设置的标签开头（如内嵌式）+内嵌代码格式

                 ID选择器：通过过去标签的ID属性

                         style标签里面对需设置的#+ID开头+内嵌代码格式

                 类选择器：通过获取标签的class属性

                         style标签里对设置的class 对象格式 .（号）+属性值+内嵌代码格式

                 通用选择器：通配符*（对所有的标签都添加该选择器里的样式）

                         style标签里对设置 *+内嵌代码格式

       

       包含选择器

                 子代选择器、（获取的是某个标签的第一级子标签）

                         (标签名称)+(.)+(class值)+(>)+内侧标签        ol .ni> ul

                 后代选择器、（获取的是某个标签里面的所有子标签）

                         (.)+(class标签名称)+(空格 )+（大标签下的子标签名称）        .ni li{ (样式) ;   ;}

                 分组选择器（逗号选择器）、（可以同时设置多个标签，用逗隔开）

                         (点)+.标签class值或者（#）+ID值+（逗号）+(点)+.标签class值或者（#）+ID值（对多个标签设置用逗号分格）例子 #yy( ID值),.one(class值){ (样式) ;   ;}

       

       属性选择器

                    （某个标签中当且仅当有某个属性）

                         标签名称+[属性名]                 列子：div[title]

                    （某个标签中当且仅当有某个属性等于某个值）

                         标签名称+[属性名="（值）"]       例子：input[type="text"]

                         或者  [属性="值"] 例子 [type="text"]

                    （某个标签中当且仅当有某个属性包含某个字符或字符串）

                         标签名称+[属性名 *（属性名+空格+*）="（值）"] 例子input[type *="e"]

                    （某个标签中当且仅当有某个属性以某个字符或字符串开头）

                         标签名称+[属性名 ^（属性名+空格+^）="（值）"] 例子input[type ^="t"]

                    （某个标签中当且仅当有某个属性以某个字符或字符串结尾）

                         标签名称+[属性名 $（属性名+空格+$）="（值）"] 例子input[type $="t"]

                    （某个标签的后一个标签）

                         标签名称+标签名称               div+p

       伪类选择器——同一个标签根据不同的状态，有不同的样式。

                          :link(冒号+link)——点击之前

                         :visited（冒号+visited）——点击之后

                         :hover(冒号+hover）——鼠标悬停的时候

                         :active(冒号+active)——链接激活时（鼠标点击不松手）

                 注：a标签里四种状态的顺序不可改变（固定）：link,visited,hover,active

       伪元素选择器——

                         p:before（冒号(css2之前为单冒号,css之后为双冒号)+before）

                                  标签+（冒号）+before{ content: "xx";  xx属性;}

                         p:after（冒号(css2之前为单冒号,css之后为双冒号)+after）

                                  标签+（冒号）+after{ content: "xx";  xx属性;}

                 注：使用伪元素选择器必须添加content属性

                        

3.css常见样式

              基本语法

                         创建.css文件（或替换成内嵌式）

                                  选择器{

                                          属性:属性值；

                                          属性:属性值；

                                  }

              常见样式

                         设置字号——font-size：数值px（或大小单词）;

                         设置字的颜色——color:颜色；

                         设置字体——font-famil:"宋体";

                         设置行高——line-height:150%（百分比） 1.5em；

                         设置加粗字体——font-weight

                  样式的特点

                         1.继承性——页面的子元素会继承父元素的样式

                         2.层叠性——子元素和父元素设置的样式是相同时，子元素的样式会覆盖父元素的样式

                

              控制文本

                         text-indent——设置文本的缩进2em可以负值

                         text-align——设置文本的对齐方式（值：right，left，center）

                         text-transform——文本的大小写

                                  none——默认，不改变

                                  capitalize——以大写字母开头

                                  uppercase——定义全部大写

                                  lowercase——定义全部小写