狂神Java学习笔记————CSS3(一)————CSS导入方式,选择器,伪类和字体文本样式

  • cascading style sheet 层叠级联样式表
  • CSS:表现层(美化网页)
  • 字体,颜色,边距,高宽,背景图片,网页定位,网页浮动。。。

第一段css:该段选择h1标签,将颜色指定为红色

h1{
    color: red;
}

CSS的导入方式

  • 行内样式
  • 内部样式
  • 外部样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式title>

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

    <style>@import "css/style.css";style>

    <style>
/*style标签内只能是css代码,注释样式为“/* * /”*/
        h1{
            color: green;
        }
    style>
head>
<body>

<h1 style="color: red">h1h1>
body>
html>
  • 注:在多个样式同时对一个元素进行样式设置时,遵循“就近原则”

选择器

  • 作用:选择页面上的某一个或者某一类元素
  1. 基本选择器
    • 标签选择器:选择页面中所有该标签元素:标签名{}
    • 类选择器:选择页面中所有该类元素:.类名{}
    • id选择器:选择页面中id对应的元素:#id{}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器title>
    <style>
        /*标签选择器:会选择页面上该标签的所以元素*/
        h1 {
            color: green;
        }
        /*类选择器的格式:.class的名字{}*/
        .a{
        color: red;
        }
    /*    id选择器:#ID名称{} 注意:全局id必须唯一*/
        #h{
            font-size: 100px;
        }
    style>
head>
<body>
<h1 class="a">标题1h1>
<h1>标题2h1>
<p class="a">内容1p>
<p id="h">内容2p>
body>
html>
  • 注意:在这三个选择器之间,存在明确的优先级,不遵循所谓就近原则,优先级:id选择器>类选择器>标签选择器。

  1. 层次选择器
    • 后代选择器: 1 2{}会选择1内所有的2元素
    • 子选择器: 1>2{}会选择1下所有2(只能一代)
    • 相邻兄弟选择器 :1+2{}选择!紧跟!1的所有2元素(1可能是多个,每个1最多只能选择一个2)
    • 通用兄弟选择器:1~2{}选择1后面所有兄弟关系的2元素
	/*后代选择器: 1 2{}会选择1内所有的2元素*/
	body p{
	    color: red;
	}
	/*子选择器: 1>2{}会选择1下所有2(只能一代)*/
	body>p{
	    color: green;
	}
	/*相邻兄弟选择器 :1+2{}选择!紧跟!1的所有2元素
	(1可能是多个,每个1最多只能选择一个2)*/
	p + h1{
	    color: gray;
	}
	/*通用兄弟选择器 1~2{}选择1后面所有兄弟关系的2元素*/
	p~p{
	    color: blue;
	}
  • 注意:其中1、2可以使用包括标签、类、id选择器的格式,且在以上四种选择器之间,应该没有明显优先级,遵循就近原则和基本选择器的优先级。考虑基本选择器的优先级时,以2的优先级为准。
  • 结构伪类选择器
/*第一个元孩子素*/
    nl li:first-child{
        color: red;
    }
    /*最后一个儿子元素*/
    nl li:last-child{
        color: green;
    }
    /*选择第i个 1:nth-child(i)选择1的父元素内的第i个子元素,且只有在父元素的
    第i个子元素是1时,才生效*/
    p:nth-child(1){
        color: gray;
    }
    /*1:nth-of-type(i) 选择1父元素内第i个类型为1的子元素*/
    p:nth-of-type(2){
        color: blue;
    }
  • 属性选择器
  • 通过属性甚至属性的值来选择元素
	/*1[2]{} 存在2属性的1类型的元素*/
    a[id]{
    }
    /*1[2=3]{} 存在2属性的值等于3的1类型的元素
    可以使用*=表包含3或者^=表示以3开头,$=表示以3结尾*/
    a[id="123"]{}

美化网页元素

  • 字体样式

  • 文字的字体、文字大小、颜色等属性
body{
            /*字体 可以设置两种用逗号隔开,中英文分别应用两种*/
            font-family: 楷体;
            /*字体大小*/
            font-size: 50px;
            /*字体粗细*/
            font-weight: bold;
        }
        /*也可一行设置多个属性:*/
        p{
            font: oblique bold 16px 楷体;
        }
  • 文本样式

  • 背景颜色、对其方式、首行缩进、行距和装饰等
/*文字与图片居中对齐*/
	a,b{
		vertical-align: middle
	}
	body{
		/*颜色color 可以#xxxxxx表示rgb颜色,或者直接颜色命
		或者使用rgb()rgba()函数,后者多一个透明度参数*/
		color: rgb(0, 0, 0);
		/*排版:居中等*/
		text-align: center;
		/*首行缩进 em为一个字母位置*/
		text-indent: 2em;
		/*行高和块高,如果一样可以有上下居中的效果*/
		height: 100px;
		line-height: 100px;
		/*上、下、中划线 设置划线颜色大多浏览器不支持
		同时只能有一个划线,应该遵循覆盖的就近原则*/
		text-decoration-color: #d60005;
		text-decoration: underline;
		text-decoration: overline;
		text-decoration: line-through;
		/*超链接去除下划线*/
		text-decoration: none;
		/*阴影 参数:阴影颜色,水平垂直偏移,模糊半径*/
		text-shadow: black 5px 5px 1px
	}
  • 超链接伪类
  • 让超链接在被选中或者点击等状态时,有不同的形态
	/*正常显示*/
    a{}
    /*鼠标悬浮的状态*/
    a:hover{}
    /*鼠标悬浮未释放的状态*/
    a:active{}
    /*已访问的链接(点过链接紫色的样子)*/
    a:visited{}

你可能感兴趣的:(追随狂神学Java)