Java学习笔记（十九）CSS

什么是CSS

• 用来做页面的美化
• 学习重点是CSS选择器
• 可以美化网页（文字，阴影，超链接，列表，渐变…）
• 页面动画
• CSS：Cascading Style Sheet层叠级联样式表
• 目前版本CSS3.0 圆角，阴影，动画 浏览器基本兼容

优势：

• 内容和表现分离
• 网页结构表现同意，可以实现复用
• 样式十分丰富
• 建议使用独立于html的css文件
• 利用SEO，容易被搜索引擎收录

语法：

• 加上内行样式一共有三种，推荐使用独立于html的css文件格式

  • 链接式：有专门的css文件，在html问价中通过link标签链接css文件,css文件的书写格式和style变迁中书写的一样

    <link rel="stylesheet" href="css/style.css">
    

  • 在本html文件的style标签下通过选择器来声明队形标签的样式

  • 行内样式，不采用css的方式，只对单个的标签进行修改,编写style属性

    <h1 style="color:red">登录h1>
    

  • 当时那种样式同时存在时，优先级时采取仅仅原则，即哪个离目标标签近使用哪个

  • 还有一种不推荐方式是@import，是CSS2.1特有。

选择器

• 作用：选择页面上的某一个或者某一类元素

基本选择器

• 标签选择器：通过标签来选择对象

  h1{
         
  	color: red;
  	background: #3cbda6;
  	border-radius:24px
  }
  p{
         
  	font-size: 800px;
  }
  

• 类选择器：通过标签的类名来选择对象，类名一样的全部一起操作,可以多个标签一起操作，可以复用–>.class{}

  .a{
         
  	color: blue;
  }
  

• id选择器：标签的id必须保证全局唯一----->#id{}

  #b{
         
      color:blue;
  }
  

• 三个选择器不遵循你就近原则，id>class>标签

层次选择器

• 后代选择器：在某个元素的后面的所有元素

  body p{
         
  	background: red;
  }
  

• 子选择器：在某个元素后面的第一下级元素

  body>p{
         
  	background: blue;
  }
  

• 弟弟选择器：同辈，选中该对象下面一个对象

  .active + p{
         
  	background: gray;
  }
  

• 通用选择器：当前选中元素的所有的向下的兄弟元素

  .active~p{
         
  	background: green;
  }
  

• p:nth-child(n){}—>选中当前P元素的父级元素下的子标签的第n个该元素

• p:nth-of-type(n){}–>选中父元素下的P元素的第N个p标签元素

• .demo a{}：表示class为demo下的所有a标签

• a[id]{}：所有的a标签且存在id属性的元素

• a[id=first]{}:a标签中id为first的元素

• a[class*=“links”]{}:a标签中class中包含link的元素

• a[herf^=http]{}:选中href中以http开头的元素

• 属性名=属性值（正则）绝对等于（=），包含这个元素（*=），以这个开头（^=），以这个结尾（$=）

美化页面元素

• 有效的触底信息，吸引用户

• 凸显页面主题，提高用户体验

  字体样式

• font-size：字体大小px；font-family：字体格式；font-weight：字体粗细；color：字体颜色

• text-align：排版，类似居中；text-indent:2em，段落首行缩进；height行高和line-height块高保持一致就是上下居中

• text-decoration:超链接下划线设置：none：下划线消失；underline：线在下面；line-through：现在中间；over-line：线在上面。

  文本样式

• 颜色：color rbg rbga

• 文本对齐方式：text-align=center

• 首行缩进 ：text-indent:2em

• 行高：line-height;

• 装饰：text-decoration;

• 文本图片水平对齐：vertical-align:middle

• a:hover{}，标签a的元素鼠标悬浮的状态

• a:active{}，鼠标按住未释放的状态

  列表样式

• list-style:(去掉圆点：none)（变为空心圆：circle）（decimal 数字）（square正方形）

• 自定义块用div，span包括要统一修改的元素

• 背景设置：background：red url（“图片路径”）图片位置 平铺方式（repeat）

• 渐变：background-image：linear-gradient(115deg,#FFFFFF 0%,#6284FF50%,#FF0000 100%)

盒子模型

• margin：外边距

• padding：内边距

• border：边框

• 边框

  • 边框的粗细
  • 边框的样式
  • 边框的颜色

• *body总有一个默认得外边距margin，常见操作对这些进行初始化

  h1,ul,li,a,body{
         
      margin:0
      padding:0;
      text-decoration:none
  }
  

• 边框与边距的定义顺序是上右下左 border:粗细，样式，颜色

• 外边距居中：margin：0 auto