Why isn't my html linking to my print CSS stylesheet?
Question
cssI am trying to create a print style sheet with css to connect to my html webpage. I added the style sheet line under and my style sheet is a css file named print.css in the same directory as my html file. This is my first time doing this, is there anything that I am doing incorrectly as far as procedure?
Thanks for any advice
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
<style>
.
.
.
</style>
</head>
CSS
<!DOCTYPE html>
<html>
<head>
<style>
body{
width: 8000px;
background-color: #FFFFFF;
}
.section{
width: 2000px;
float: left;
height: 100%;
z-index: 1;
font-size:20px;
page-break-after: always;
page-break-inside: avoid;
p a:after {
content: " (" attr(href) ")";
font-size: 50%;
}
</style>
</head>
</body>
</html>
3 answers
solution1
3 2013-04-16 17:36:17
CSS files cannot contain HTML. This is all your print.css file should contain:
body{
width: 8000px;
background-color: #FFFFFF;
}
.section{
width: 2000px;
float: left;
height: 100%;
z-index: 1;
font-size:20px;
page-break-after: always;
page-break-inside: avoid;
}
p a:after {
content: " (" attr(href) ")";
font-size: 50%;
}
solution2
0 2016-03-08 16:09:13
You have included HTML within your CSS file which will not work. You need to remove the <!DOCTYPE html> <html> <head> and <style> tags.
You have also forgotten to close your .section css with a closing bracket so it will look like this:
.section{
width: 2000px;
float: left;
height: 100%;
z-index: 1;
font-size:20px;
page-break-after: always;
page-break-inside: avoid; }
Other than that check your CSS file has the same name as specified in the link tag - it may be possible that you have a spelling mistake somewhere.
solution3
-1 2013-04-16 17:32:57
The href is wrong in your call to the css file:
You are calling to an HTML file that probably doesn't exist
<link href="print.html" type="text/css" rel="stylesheet" media="print" />
If it does exist extract your css from that HTML file and put it into a CSS Document, then link to the file like this:
<link href="print.css" type="text/css" rel="stylesheet" media="print" />
Inside that file wrap your styles in this tag:
@media print { your css here }
That should do exactly what you need it to do.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.