CSS简介语法概念选择器样式_css选择器概念-优快云博客

本文深入解析CSS（级联样式表）的基础概念与优势，包括如何通过不同的方式应用样式，如行内样式、内部样式表和外部样式表。详细介绍了选择器的种类与优先级，以及如何利用层次选择器、结构伪类选择器和属性选择器精确控制网页样式。此外，还探讨了如何使用CSS修饰字体、文本、超链接和背景，提供了丰富的实例。

CSS

CSS的概念：Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的优势：1.内容与表现分离
   2.网页的表现统一，容易修改
   3.丰富的样式，使得页面布局更加灵活
   4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
   5.运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS的语法：
   1.标签h1
   选择器{声明1；
   声明2；
       ·····}

   h1 {       ------h1 选择器
   font-size:12px; ------属性值（声明）
   color:#F00;
   }

2.标签style

CSS样式：1.行内样式
           使用属性   引入CSS样式
   <h1 style="color:red;">style属性的应用</h1>
       -----------
   <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
               -------------

   2.内部样式表
       CSS代码写在<head>的<style>标签中
               <style>
           h1{color: green; }
               </style>
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

3.外部样式表
       CSS代码保存在扩展名为.css的样式表中
           HTML文件引用扩展名为.css的样式表，有两种方式
                   1.链接式
                   2.导入式
       1.链接外部样式表
           <head>
           ……
           <link href="style.css" rel="stylesheet" type="text/css" />
           ----   --- ----------       ----
           ……
           </head>
           ----------------------------------------------------------
           <head>
           ……
           <link href="文件路径" rel="使用外部样式表" type="文件类型" />
           ……
           </head>
       （1）<link>标签必须放在<head>标签中
       2.导入外部样式表
           <head>
           ……
           <style type="text/css">
                   ---
           
           </style>
           </head>

   链接式与导入式的区别：
   1.<link/>标签属于HTML，@import是属于CSS2.1
   2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
   3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
   4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级：行内样式>内部样式表>外部样式表---------就近原则---------就近原则：越接近标签的样式优先级越高

基本选择器
1.标签选择器标签选择器直接应用于HTML标签

          p { font-size:16px;}
               ----------
       标签选择器   属性值（声明）

   2.HTML标签作为标签选择器的名称
   <h1>…<h6>、<p>、<img/>

   3.类选择器       类选择器可在页面中多次使用
       .class { font-size:16px;}----------------------<标签名 class= "类名称">标签内容</标签名>

----- --------------
类名称（选择器）属性值（声明）

   4.ID选择器       ID选择器在同一个页面中只能使用一次
       #id { font-size:16px;}
       --- ----------------
   ID名称（ID选择器）属性值（声明）
   （1）强调ID选择器的名称就是HTML中标签的ID名称

选择器的优先级：ID选择器>类选择器>标签选择器

标签选择器是否也遵循“就近原则”？
不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

CSS的高级选择器：
       1.层次选择器
       2.结构伪类选择器
       3.属性选择器

   层次选择器：
       后代：E F
       子代：E>F
       相邻：E+F
       通用：（同辈）E~F

   结构选择器：
       E F：first-child ul    li:first-child{background: red; 第一个
       E F：last-child       li:last-child{background: red;最后一个
       E F: nth-child       p：nth-child(2){background: red;第几个（）
       E F:nth-of-type(n)   p:nth-of-type(2){background: blue;第几个（）

E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

   属性选择器：
       P[id]           存在属性id的元素p[id] {background: yellow;}
       P[id=value]       属性id=value的元素p[id=value] {background: yellow;}
       P[Class="value"]   属性Class="value"的元素p[Class="value"] {background: yellow;}
       P[id$=value]       属性id里以value结尾的元素p[id$=value] {background: yellow;}
       P[class*=value]       属性class里包含value字符串的元素p[id*=value] {background: yellow;}           p[id^=value]       属性id里以value开头的元素p[id^=value]{background: yellow;}

使用CSS修饰

字体：font：s w s f
font-family类型 font-size大小 font-weight粗细 font-style风格

文本属性
color设置文本颜色

text-align设置元素水平对齐方式

       text-indent设置首行文本的缩进

       line-height设置文本的行高

text-decoration设置文本的装饰

使用CSS设置超链接：
a:link 未单击访问时超链接样式

a:visited 单击访问后超链接样式

a:hover 鼠标悬浮其上的超链接样式

a:active 鼠标单击未释放的超链接样式

list-style 去除列表前面的小黑点

设置伪类的顺序：a:link->a:visited->a:hover->a:active

网页背景

背景颜色

background-color
背景图像

background-image

background-image属性
background-image:url(图片路径);

       背景重复方式
               background-repeat属性
               repeat：沿水平和垂直两个方向平铺
               no-repeat：不平铺，即只显示一次
               repeat-x：只沿水平方向平铺
               repeat-y：只沿垂直方向平铺

强调在设置背景图像时，这三个属性通常同时使用，只有在设置了背景图像时，背景重复方式和定位才有效

单词

html
       html head body title
       p br hr strong em h1 span
       img a table tr td ol ul li dl dt dd
       form input select option textarea
       type = text password radio checkbox
           button submit reset image file
   css
       选择器
           基本选择器
               #id .class h2 #one,#twl,h2{}
           高级选择器
               层次
                   h2 .title
                   h2 > .title
                   h2 + .title
                   h2 ~ .title
               结构
                   :first-child
                   :last-child
                   :nth-child
                   :nth-of-type
                   :link
                   :visited
                   :hover
                   :active
               属性
                   [id^$*='value']

       css基本样式
           字体
               font- style weight size family
           文本
               color line-height
               text- align indent decoration
           超链接

           列表
               list-style-type
                   none disc ...
           背景
               background- color image repeat