第009讲初识css 类选择器 id选择器 html选择器

来源：互联网发布：java poijar包编辑：程序博客网时间：2024/06/08 01:13

这里写图片描述

CSS 的基本语法：

选择器{属性1：属性值；属性2：属性值；...}

例：

a.html<html><head><!--引入CSS,外联--><link rel="stylesheet" type="text/css" href="my.css"></head><body><!--span元素通常用于存放小块内容--><span class="s1">栏目一</span><br/><span class="s2">栏目二</span><br/><span class="s3">栏目三</span><br/><span class="s4">栏目四</span><br/><span class="s5">栏目五</span></body></html>

my.css/* .s1 用术语叫 类选择器 */.s1{    color:green;    font-size:30px;}.s2{    color:yellow;    front-size:12px;}.s3{    color:blue;    font-style:italic;}.s4{    color:green;    font-weight:bold;}.s5{    color:#9c3131;}

滤镜技术：

<html><head><!--内链CSS-->    <style type="text/css">    <!--变灰-->        a:link img{            filter:gray;        }    <!--悬停-->        a:hover img{            filter:""        }    </style></head><body><a href="3"><img src="a.jpg"/></a></body></html>

CSS 中常用的选择器：

类选择器(class 选择器)：

基本结构： .类选择器{    属性名：属性值；    ... }

id 选择器：

基本结构： #id{    属性名：属性值；    ...}

html元素选择器：

基本结构： 某html元素{     属性名：属性值；     ... }

b.html<html><head><link rel="stylesheet" type="text/css" href="b.css"></head><body>上海欢迎你！<br/><span class="s1">新闻一</span><span class="s1">新闻二</span><span class="s1">新闻三</span><span class="s1">新闻四</span><span class="s1">新闻五</span><br/><br/><span id="id1">这是一则非常重要的新闻</span></body></html>

b.css.s1{    background-color:pink;    font-weight:bold;    font-size:16px;}/* id 选择器的使用*/#id1{    background-color:gray;    font-size:40px;    color:black;}body{    color:orange;}

这里写图片描述
4. 通配符选择器：

0 0

第009讲 初识css 类选择器 id选择器 html选择器

第009讲初识css 类选择器 id选择器 html选择器